componentWillReceiveProps example

The componentWillReceiveProps life-cycle method is used to check any change in prop values and update the state of the component if required. This life-cycle method has access to both the previous set of props and new set of props hence we can compare them and update the state if required.

The componentWillReceiveProps life-cycle method will get deprecated, React 16.3 introduced a new life-cycle method getDerivedStateFromProps, which should be used to check prop value changes going forward.

The following example uses componentWillReceiveProps() to check the value of the prop "parentColor", compare the previous value of the prop and the current value of the prop and updates the state if the prop was changed. Any change in state value updates the color of the box displayed in the UI.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class ChildComponent extends Component {
constructor(props) {
super(props);
this.state = {
bgColor: ""
};
}

componentWillReceiveProps(nextProps) {
if (this.props.parentColor !== nextProps.parentColor)
  this.setState({bgColor: nextProps.parentColor});
}

render() {
return (
  <div>
Parent color: <b>  {this.state.bgColor} </b>
{ (this.state.bgColor === 'red') ?
<div style={{border: '2px solid red', height: '200px', width: '200px', margin: '10px'}}> 
   <span>Hello Red Box</span>
</div>
:
<div style={{border: '2px solid blue', height: '200px', width: '200px', margin: '10px'}}> 
   <span>Hello Blue Box</span>
</div>
}
  </div>
);
}
}

class HellocomponentWillReceiveProps extends Component {
  constructor(props) {
    super(props);
    this.state = {
color: "red"
};
this.handleRedClick = this.handleRedClick.bind(this);
this.handleBlueClick = this.handleBlueClick.bind(this);
  }

  handleRedClick() { 
    this.setState({color : "red"});
  }

  handleBlueClick() { 
    this.setState({color : "blue"});
  }

  render() {
return (
  <div>
  <button onClick = {this.handleRedClick}> Red </button>
  <button onClick = {this.handleBlueClick}> Blue </button><br/>
  <ChildComponent parentColor = {this.state.color} />
  </div>
);
  }
}

ReactDOM.render(<HellocomponentWillReceiveProps />, document.getElementById('app'));

Output: