The getDerivedStateFromProps Method -
The getDerivedStateFromProps() method is called first when a component gets updated. This is still the natural place to set the state object based on the initial props.
Explore to Understand - React Lifecycle Components
After changes the color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the color attribute, the color is still rendered as yellow.
See the below example,
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
static getDerivedStateFromProps(props, state) {
return {color: props.color };
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>Your Color is {this.state.ecolor}</h1>
<button type="button" onClick={this.changeColor}>Change this color</button>
</div>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
Result of this example is – Your color is Yellow