React: Controlling input value with both props and state

Then you just need to move the state to the child component, instead of rendering from props.inputValue directly. Basically you'd just move handleChange to the child.

Set the initial value from props.inputValue in getInitialState, then make sure to update the child state in componentWillReceiveProps.


componentWillReceiveProps is deprecated

Source: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

This lifecycle was previously named componentWillReceiveProps. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

Use something like this instead:

componentDidUpdate(prevProps) {       
        if (this.props.yourObj != null && prevProps.yourObj !== this.props.yourObj) {
            this.setState({
                yourStateObj = this.props.yourObj
            });
        }
}