title: Update a property of a component from the parent
body: <p>I have been trying to change the property of a child but failing. I have tried most of the lifecycle methods of react yet none of them seemed to work (didMount propsUpdate etc).</p>
  
  <p>Any help would be appreciated</p>
  
  <p><a href="http://codepen.io/yogainalift/pen/KMPvNz" rel="nofollow">http://codepen.io/yogainalift/pen/KMPvNz</a></p>
  
  <pre><code>var Field = React.createClass({
    getInitialState: function() {
      return {
        message: this.props.setMessage || 'should change this one'
      }
    },
  
    render() {
      return (
        &lt;div&gt;
          {this.state.message}
        &lt;/div&gt;
      )
    }
  });
  
  var App = React.createClass({
    getInitialState: function() {
      return {
        inputField: ''
      }
    },
  
    handle(event) {
      console.log(event.target.value);
      this.setState({
        inputField: event.target.value
      })
    },
  
    render() {
      return (
        &lt;div&gt;
          &lt;input type='text' placeholder='changing this text' onChange={this.handle}/&gt;
          &lt;Field setMessage={this.state.inputField} /&gt;
        &lt;/div&gt;
      )
    }
  });
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>