Making the child's input dependent on parent input value

Question

My goal is to

1. initialize the child's state with the parent's respective value. To do this, I set the child's state value in the constructor using the following code:
2. Reset the value of child as soon as the parent'
3. Retain the ability to change the child's value

To achieve the second goal, I use getDerivedStateFromProps the following way https://codepen.io/jedgar-nawasardqn/pen/VRpWrZ?editors=1011

class Parent extends React.Component { 
    constructor(props) {
        super(props)
        this.state = {
          value: "default valu"
        }
    }
    onChange = (value) => {
         this.setState({
              value: value
         })
    }

    render() {

      return (
          <div>
              <form>
                 <label>Parent: </label>
                 <input
                 value={this.state.value}
                 onChange={(e) => this.onChange(e.target.value)}/>
              </form>
              <Child
                 value={this.state.value}/>
          </div>);
      }
}

class Child extends React.Component {

  constructor(props) {
        super(props)
        this.state = {
          value: this.props.value
        }
    }
   static getDerivedStateFromProps(nextProps, prevState) {
     console.log('nextProps', nextProps)   
     return {
            value: nextProps.value
        }
    }
  onChange = (value) => {
         console.log('CHild changed')
         this.setState({
              value: value
         })
    } 
  render() {
       return (
         <div>
           <label>Child: </label>
           <input
                value={this.state.value}
                onChange={(e) => this.onChange(e.target.value)}/>
         </div>)
   }
}

React.render(<Parent/>, document.getElementById('app'));

...but for some reason I can't make it work. Any suggestions ?

Answer 1

Assuming I understood your goals of wanting to have a parent input control a child input when the parent changes, but allowing the child input to change itself and not affect the parent:

The problem is that getDerivedStateFromProps gets called regardless so when you are changing the state from the Child's input, getDerivedStateFromProps is immediately reverting it back to the Parent's value. You should use componentDidUpdate and diff the props rather than using getDerivedStateFromProps and only update the Child's state to match the Parent's when the Parent's state actually changes.

I made a Code Sandbox based on your Fiddle to demonstrate this: https://codesandbox.io/s/m5qj6qq769?fontsize=14

Answer 2

First, even if it's not about your question, I suggest you to not use an arrow function inside the render() method, so, instead of writing onChange={(e) => this.onChange(e.target.value)} />, you should just write onChange={this.onChange} />. The reason is that the arrow function would be created and then discarded at every render(): not a big deal if we have few renders and few arrow functions, but.. It's better to avoid waste of computational power :)

Now, about your question! Honestly, it seems that the Child Component just need to show the value, thus, it's not really useful to "copy" the value from Parent Component to Child Component: you can just keep your values in the Parent Component, and then refers to that value in both Parent and Child Component. To do this, you need to pass an handler function also to the Child Component. Let's look at the fiddle!

class Child extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div>
                <label>Child: </label>
                <input
                    value={this.props.value}
                    onChange={this.props.handleChange}/>
            </div>
        );
    }
}

class Parent extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {value: "Default Value"};
    }
    
    handleChange = (e) => {
        this.setState({value: e.target.value});
    }
    
    render() {
        return (
            <div>
                <form>
                    <label>Parent: </label>
                        <input
                            value={this.state.value}
                            onChange={this.handleChange} />
                </form>
                <Child
                    value={this.state.value}
                    handleChange={this.handleChange} />
          </div>
        );
    }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id='root'></div>