React Send child input data to update parent state

Question

Setup: I have set up a two react components in a parent child relationship. The parent has a state that can be changed by press of a button on parent itself.

Expected behaviour: In the child, I have an input field and I want the state to change to the value I send in the input field on the press of the submit button. I have set up the parent and the child as follows:

What I have tried: I going through this answer and this youtube video but I guess I am not smart enough to make sense of it.

This is what my code looks like Parent:

class App extends Component {
  state = { 
    value:"someValue"
   };

   changeValue = (value) => {
     this.setState({
       value
     })    
   }

  render() {
    return (
      <div>
        <p>this is the value from state: {this.state.value}</p>
        <button onClick={()=>this.changeValue("valueFromParentComponent")}>Press to change value from parent component</button>
        <br/><br/>
        <Child getChildInputOnSubmit={()=>this.changeValue()} />
      </div>      
    );
  }
}

And this is what the child looks like

Child:

class Child extends Component {
    state = {

    }
    sendChildData = (childInputValue) => {
        console.group("This is the data from the input of the child component")
        console.log("==============")
        console.log(childInputValue)
        console.log("==============")
    }


    render() {
        return (
            <div>
                This is the child component
            <br /><br />
                <form>
                    <input type="text" placeholder="Some placeholder"></input>
                    <button onSubmit={this.sendChildData()} type="submit">Send child's input to parent</button>
                </form>

            </div>);

    }
}

Answer 1

The React behaviour encourages to implement an inverse data flow inside a component hierarchy. Meaning that the child components can receive parent methods through props, this methods will work as callbacks, allowing to receive data, trigger behaviours, update his state and more.

I attach a StackBlitz example, showing how this concept would work in your setup https://stackblitz.com/edit/react-jsv5jo

Edit: Here a few extra tips applied on the example:

• To work with inputs on React, a common setup consists on listen the onChange event to receive new data and update the component state. Then, this state is used in the value attribute to update the input content on DOM.

• Listen the onSubmit event on the form tag instead on submit button, and remember to add some logic to avoid reloading.

• Another good practice on React components is initialize your state object inside the Constructor (In case to be working with a Class Component) and write methods to avoid bloat the render one (Be sure to bind the extra methods on your constructor to avoid invocation problems)

Answer 2

Callbacks are used to pass data from Child component to Parent component in React. We wright function in Parent component that will receive value and pass this function to child component through Props.

  class Parent extends Component {
  state = {
    value: 'someValue'
  };
  changeValue = value => {
    this.setState({
      value
    });
  };
  render() {
    return (
      <div>
        <p>this is the value from state: {this.state.value}</p>
        <button onClick={() => this.changeValue('valueFromParentComponent')}>
          Press to change value from parent component
        </button>
        <br></br>
        <Child getChildInputOnSubmit={this.changeValue} />
      </div>
    );
  }
}

Now in Child component we call Parents function that we passed in props and send value.

  class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Childvalue: ''
    };
  }
  handleChange = event => {
    event.preventDefault();
    this.setState({ Childvalue: event.target.value });
  };
  sendToParent = () => {
    //here calling Parents changeValue
    this.props.getChildInputOnSubmit(this.state.Childvalue);
  };
  render() {
    return (
      <div>
        This is the child Component
        <br></br>
        <form action='#' onSubmit={this.sendToParent}>
          <input
            type='text'
            placeholder='Some placeholder'
            value={this.state.Childvalue}
            onChange={this.handleChange}
          ></input>
          <button type='submit'>Send child's input to parent</button>
        </form>
      </div>
    );
  }
}