Parent component passes a prop down to the Child component. The Child component will first be constructed via the constructor method. Then we assign the prop to the state.
But what if the parent component updates its prop? Since the constructor only gets called once, the child component’s state won’t get the updated prop.
The below component won’t display the updated input value:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyComponent extends React.Component { constructor(props) { // <-- only called once. Any prop updates after this won't get assigned. super(props) this.state = { records: [], inputValue: this.props.inputValue }; } render() { return <div>{this.state.inputValue}</div> } } |
In order to get the updated props value, we must use props inside render method.
Now, anytime the parent component updates the prop, this child component will get the update.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyComponent extends React.Component { constructor(props) { super(props) this.state = { record: [] } } render() { return <div>{this.props.inputValue}</div> } } |