Как сделать так, чтобы react вставлял другие значения в зависимости от значений Cookie?

Question

Как сделать так, чтобы react вставлял другие значения в зависимости от значений Cookie?

Александр Новиков Ученик (21), на голосовании 1 год назад

Есть код:

 export class Project_list extends React.Component{ 
    render(): React.ReactNode { 
        return( 
             
                Наши проекты:
 
                 
                    {this.props.item_servise.map( 
                        (item) => { 
                            card_count++ 
                            return( 
                                 
                                                                            backgroundImage: `url(${item.image})` 
                                    }} id = 'item_img' title = {item.name}> 
 
                                    {item.name}
 
                                    

 
                                    {item.deskription}
 
                                
 
                            ) 
                        } 
                    ) 
                    } 
                
 
                
 
                Вы всегда можете предложить свою идею для проекта на форуме
 
            
 
        ) 
    } 
}

Нужно, чтобы при Cookies.get('lang') == 'eng' значение {item.deskription} менялось на {item.deskription_eng}, а при Cookies.get('lang') == 'rus' менялось обратно

Answer 1

 import React from 'react'; 
import Cookies from 'js-cookie'; 
 
export class Project_list extends React.Component{  
    constructor() { 
        super(); 
        this.state = { 
             lang : Cookies.get('lang') 
        } 
    } 
 
    componentDidMount() { 
        this.updateLang(); 
    } 
 
    componentDidUpdate() { 
        this.updateLang(); 
    } 
 
    updateLang() { 
        const currentLang = Cookies.get('lang'); 
        if(currentLang !== this.state.lang) { 
            this.setState({ lang: currentLang }); 
        } 
    } 
   
    render(): React.ReactNode {  
        return(  
              
                Наши проекты:
  
                  
                    {this.props.item_servise.map((item) => {  
                        return(  
                              
                                 
                                    
 
                                  
 
                                {item.name}
  
                                

  
                                 
                                    {this.state.lang === 'eng' ? item.deskription_eng : item.deskription} 
                                
  
                            
  
                        )  
                    })}  
                
  
   
                
  
                Вы всегда можете предложить свою идею для проекта на форуме
  
            
  
        )  
    }  
}

В данном коде состояние lang инициализируется значением из cookie и затем обновляется при каждом новом рендере компонента. При рендеринге описание проекта (item.deskription) меняется в соответствии со значением lang.