How To Update React Component State Based On Props

How can I force a react component to update state whenever props change?

I have been using the method:

componentWillReceiveProps(nextProps){
    this.setState({key:nextProps}); 
    console.log(this.state);
  }

The console shows me that nextProps is the defined value, but this.state.key remains undefined.

Thanks!

The console log this.state shows undefined because setState is asynchronous. Hence when you perform setState it does not update state immediately and that's why console log doesn't show updated state.

You should do as follows:

componentWillReceiveProps(nextProps){
    this.setState({key:nextProps}, () => {
        console.log(this.state);
    }); 
 }

Here when setState will take place the callback defined as a second parameter gets called and then we have updated state.