I want to communicate a property change from one component to another component.

The answers on Stackoverflow involved quite a bit of complexity, I have tried to explain it in a simple manner.

In this scenario the outer component can change the properties of the inner component.

The inner component can also change itself, although can’t change the properties of the outer component.

The inner component

InnerComponent = React.createClass({

getInitialState: function() {
return {
changed: this.props.changed
};
},
componentWillReceiveProps: function(nextProps) {
return this.setState({
changed: nextProps.changed
});
},
render: function() {
# view the full render function in codepen
}

});

The primary concept is that the state of the outer component is copied into the props of the inner component.

The outer component

OuterComponent = React.createClass({

getInitialState: function() {
return {
changed: false
};
},

render: function() {

# view the full render function in codepen

InnerComponent({changed: this.state.changed})
}
});

I didn’t include the details of the render functions but you can view and edit all the code in the demo I prepared on codepen.

Ping me on mail@kangchen.me if you have any questions =)


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