Updating state with props on React child component

Question

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.

After I send an updated value to the parent component, the child component isn't updating the state with the updated props.

How do I get it to update the state on the child component?

My pared-down 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 <Child name={this.state.name} onUpdate={this.handleUpdate.bind(this)} />     } }   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 <div>                         {this.state.name}                     <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />                     <input type="button" value="Update Name" onClick={this.handleUpdate.bind(this)} />                 </div>     } } 

Answer 1

You need to implement componentWillReceiveProps in your child:

componentWillReceiveProps(newProps) {     this.setState({name: newProps.name}); } 

Edit: componentWillReceiveProps is now deprecated and will be removed, but there are alternative suggestions in the docs link above.

Answer 2

Calling setState() in componentWillReceiveProps doesn't cause additional re-render. Receiving props is one render and this.setState would be another render if that were executed within a method like componentDidUpdate. I would recommend doing the this.state.name !== nextProps.name in shouldComponentUpdate so it's always checked for any update.

componentWillReceiveProps(nextProps) {     this.setState({name: nextProps.name}); }  shouldComponentUpdate(nextProps) {     return this.state.name !== nextProps.name; }