Communication child-parent ReactJs

- 1 answer

Ad

I'm learning react js and now I have a situation that I don't know how to resolve and maybe some of you could help me out.

In my webapplication I have a react component that represents a dropdown to select the language, as follows:

class LocaleSwitcher extends React.Component{


constructor() {
    super();
    this.render = this.render.bind(this);
    this.componentDidMount=this.componentDidMount.bind(this);
    this.state = { languages:[] };
}


render(){


    return (<li>{this.props.selectedLanguage}
        <ul className="dropdown">
            {
                this.state.languages.map(function(result){

                    return (<ListItemWrapper key={result.id}  title={result.text} url="language" />);
                })

            }
        </ul>
    </li>);

}

componentDidMount(){
    var component = this;
    $.get('data/languages',function(result){
        component.setState({languages: result});
    });
}

};

As you can see I'm displaying the selectedLanguage (by default "english") using props : {this.props.selectedLanguage}

For the li elements I have created another component ListItemWrapper, and the communication parent-child I'm doing it via props:

class ListItemWrapper extends React.Component{

constructor() {
super();
this.render = this.render.bind(this);
this.handleClick =this.handleClick .bind(this);
}


 render () {
    console.log("title:" + this.props.title);
    return (<li onClick={this.handleClick}><a target="_blank" rel="nofollow noreferrer" href="#">{this.props.title}</a></li>);
}

handleClick () {
    $.get(this.props.url+"?code="+this.props.title,function(result){


/*Insert the code here */

    });
}
};

My problem now is that I don't know how to do the communication from child to parent, as once the user selects a language I would like to update the dropdown with the selected language, so what I need is to fill the method handleClick to send to the parent component the selected language and update it, but I don't know how to do it. So far I have tried that with no luck

handleClick () {
    $.get(this.props.url+"?code="+this.props.title,function(result){

this.props.selectedLanguage=this.props.title;

});
}
};

Any help will be very appreciated.

Ad

Answer

Ad

you have to declare the handle click in your LocaleSwitcher component and pass it to the ListItemWrapper component same like the selected language you have passed.

you can also pass the events in props.

so your LocaleSwitcher component should look like

 handleClick () {
    $.get(this.props.url+"?code="+this.props.title,function(result){


/*Insert the code here */

    });
}
    render(){


    return (<li>{this.props.selectedLanguage}
        <ul className="dropdown">
            {
                this.st

    return (<li>{this.props.selectedLanguage}
        <ul className="dropdown">
            {
                this.state.languages.map(function(result){

                    return (<ListItemWrapper key={result.id}  title={result.text} url="language" handleClick={this.handleClick}/>);
                })

            }
        </ul>
    </li>);

}

and your ListItemWrapper component look like

     render () {
    console.log("title:" + this.props.title);
    return (<li onClick={this.props.handleClick}><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">{this.props.title}</a></li>);
}
Ad
source: stackoverflow.com
Ad