As a followup to a post a while back about communicating between React components. I’d like to discuss a couple of methods to communicate a change in state from from a child component to a parent component.

The first method is for a parent node to pass down a callback into the child component, a handler inside the child component can execute this callback which changes the state of the parent component.

The inner component

var InnerComponent = React.createClass({
handleChange() {
this.props.callbackChange();
},
render() {
return (
<div className="inner-component">
<button onClick={this.handleChange}> Trigger change </button>
</div>
);
}
});

The child component takes a prop, which is a callback from the parent component.

The outer component

var OuterComponent = React.createClass({
handleChange() {
//handle change here
},
render() {
var outerClass;
outerClass = this.state.changed ? "outer-component changed" : "outer-component";

return (
<div className={outerClass}>
<InnerComponent callbackChange={this.handleChange}/>
</div>
);
}
});

In the parent component we attach a handler to the callback that we pass into the child component.


See the Pen Communicate between React components by Kang Chen (@kang) on CodePen.