Updating state with props on React child component
<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>