title: Updating state with props on React child component
body: <p>I have a React app, where props from a parent component are passed to a child component and the props then set the state on the child.</p>
  
  <p>After I send an updated value to the parent component, the child component isn't updating the state with the updated props. </p>
  
  <p>How do I get it to update the state on the child component?</p>
  
  <p>My pared-down code:</p>
  
  <pre><code>class Parent extends React.Component {
      constructor (props) {
          super(props);
          this.state = {name: ''} 
      }
      componentDidMount () {
          this.setState({name: this.props.data.name});
      }
      handleUpdate (updatedName) {
          this.setState({name: updatedName});
      }
      render () {
          return &lt;Child name={this.state.name} onUpdate={this.handleUpdate.bind(this)} /&gt;
      }
  }
  
  
  class Child extends React.Component {
      constructor (props) {
          super(props);
          this.state = {name: ''} 
      }
      componentDidMount () {
          this.setState({name: this.props.name});
      }
      handleChange (e) {
          this.setState({[e.target.name]: e.target.value});
      }
      handleUpdate () {
          // ajax call that updates database with updated name and then on success calls onUpdate(updatedName)
      }
      render () {
          console.log(this.props.name); // after update, this logs the updated name
          console.log(this.state.name); // after update, this logs the initial name until I refresh the brower
          return &lt;div&gt;    
                      {this.state.name}
                      &lt;input type="text" name="name" value={this.state.name} onChange={this.handleChange} /&gt;
                      &lt;input type="button" value="Update Name" onClick={this.handleUpdate.bind(this)} /&gt;
                  &lt;/div&gt;
      }
  }
  </code></pre>