getDerivedStateFromProps example

The getDerivedStateFromProps life-cycle method is invoked before calling the render method, both during the initial mounting phase and the update phase. This method returns an object which will be updated in the components state, if no state change is required this method returns null.

The following example uses getDerivedStateFromProps() to check the value of the prop "parentColor", compare the previous value of the prop (saved in the state variable prevColor). If the prop value is different from the previous value then the state value of "bgColor" is updated, which in-turn 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 = {
prevColor: "",
bgColor: ""
};
}

static getDerivedStateFromProps(props, state) {
if (props.parentColor !== state.prevColor) {
  return {
bgColor: props.parentColor,
prevColor: props.parentColor
  };
} else {
return null;
}
}

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: