How can I update the parent's state in React?

Question

My structure looks as follows:

Component 1   - |- Component 2    - - |- Component 4    - - -  |- Component 5  Component 3 

Component 3 should display some data depending on state of Component 5.

Since props are immutable, I can't simply save its state in Component 1 and forward it, right? And yes, I've read about Redux, but I don't want to use it. I hope that it's possible to solve it just with react. Am I wrong?

Answer 1

For child-parent communication you should pass a function setting the state from parent to child, like this

 class Parent extends React.Component {   constructor(props) {     super(props)      this.handler = this.handler.bind(this)   }    handler() {     this.setState({       someVar: 'some value'     })   }    render() {     return <Child handler = {this.handler} />   } }  class Child extends React.Component {   render() {     return <Button onClick = {this.props.handler}/ >   } }  

This way the child can update the parent's state with the call of a function passed with props.

But you will have to rethink your components' structure, because as I understand components 5 and 3 are not related.

One possible solution is to wrap them in a higher level component which will contain the state of both component 1 and 3. This component will set the lower level state through props.

Answer 2

I found the following working solution to pass the onClick function argument from the child to the parent component:

Version with passing a method()

//ChildB component class ChildB extends React.Component {      render() {          var handleToUpdate = this.props.handleToUpdate;         return (<div><button onClick={() => handleToUpdate('someVar')}>             Push me           </button>         </div>)     } }  //ParentA component class ParentA extends React.Component {      constructor(props) {         super(props);         var handleToUpdate = this.handleToUpdate.bind(this);         var arg1 = '';     }      handleToUpdate(someArg){         alert('We pass argument from Child to Parent: ' + someArg);         this.setState({arg1:someArg});     }      render() {         var handleToUpdate = this.handleToUpdate;          return (<div>                     <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>)     } }  if(document.querySelector("#demo")){     ReactDOM.render(         <ParentA />,         document.querySelector("#demo")     ); } 

Look at JSFiddle

Version with passing an Arrow function

//ChildB component class ChildB extends React.Component {      render() {          var handleToUpdate = this.props.handleToUpdate;         return (<div>           <button onClick={() => handleToUpdate('someVar')}>             Push me           </button>         </div>)     } }  //ParentA component class ParentA extends React.Component {     constructor(props) {         super(props);     }      handleToUpdate = (someArg) => {             alert('We pass argument from Child to Parent: ' + someArg);     }      render() {         return (<div>             <ChildB handleToUpdate = {this.handleToUpdate} /></div>)     } }  if(document.querySelector("#demo")){     ReactDOM.render(         <ParentA />,         document.querySelector("#demo")     ); } 

Look at JSFiddle