How to pass state back to parent in React?

Pass State as a Prop

I have recently learned a method that works great for changing state in a <Parent /> component from a <Child /> component.

This might not be the exact answer for this question, but it is surely applicable to this situation and other similar situations.

It works like this:

set the default STATE in the <Parent /> component - Then add the 'setState' attribute to the <Child />

const Parent = () => {
  const [value, setValue] = useState(" Default Value ");
   return (
    <Child setValue={setValue} />
  )
}

Then change the state(in Parent) from the Child component

const Child = props => {
  return (
   <button onClick={() => props.setValue(" My NEW Value ")}>
    Click to change the state
  </button>
 )
}

When you click the button, the state in the <Parent /> component will change to whatever you set the state to in the <Child /> component, making use of "props".. This can be anything you want.

I Hope this helps you and other devs in the future.

Move handleClick to the parent and pass it to the child component as a prop.

<LoginPage handleClick={this.handleClick.bind(this)}/>

Now in the child component:

<form onSubmit={this.props.handleClick}>

This way submitting the form will update the state in parent component directly. This assumes you don't need to access updated state value in child component. If you do, then you can pass the state value back from the parent to the child as a prop. One-way data flow is maintained.

<LoginPage  handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>

In Parent Component:

getDatafromChild(val){
    console.log(val);
}
render(){
 return(<Child sendData={this.getDatafromChild}/>);
}

In Child Component:

callBackMethod(){
   this.props.sendData(value);
 }