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.