communication from parent to child and triggered by parenton blog "React -- Communication between components" on 2014/06/24

parent->child-triggered-parent.js

// For Parent.js
var Parent = React.createClass({
    getInitialState: function () {
        return {
            changedValue: ""
        };
    },

    // the callback function for changing the text in <input type="text"></input>
    changeHandler: function (event) {
        var value = event.target.value;
        // update the value of state, react will 
        // render it and pass it to Child
        this.setState({changedValue: value});
    },

    render: function () {
        return (
            <div><input onchange="{this.changeHandler}/" type="text" value="Parent"></input>
                // once the value "changedValue" is updated by method setState 
                // react will render the dom and pass it to Child as its prop named "parentChangedValue"
                <child parentchangedvalue="{this.state.changedValue}"></child></div>
        );
    }
});

// For Child.js 
var Child = React.createClass({
    getInitialState: function () {
        return { parentChangedValue: "" };
    },

    componentWillReceiveProps: function (nextProps) {
        var result = nextProps.parentChangedValue;
        this.setState({parentChangedValue: result});
    },

    render: function () {
        return (
            <div><input type="button" value="{this.state.parentChangedValue}"></input></div>
        );
    }
});