how to pass state from child component to parent component in reacts

Question

I have a parent component

class ParentComponent extends React.PureComponent {       
       render(){
        return(   
        //IN HERE I'm calling child parent    
          <ChildComponent/>
        )
        }        
        }

class ChildComponent extends React.PureComponent {  
    constructor(props) {
        super(props);
        this.state = {
          sample: '',        
        };  
    }

how can I get the sample state to the parent component?

https://stackoverflow.com/questions/40722382/how-to-pass-state-back-to-parent-in-react — Tuk Tuk, Oct 08 '20 at 03:44

score 2 · Accepted Answer · answered Oct 08 '20 at 04:17

So at the Parent Component make a method which receives value in return.
```
StateValue = (value) =>{
 console.log(value);
} 
```
Pass this method as props to the child component.
```
<ChildComponent method={this.StateValue}/>
```

At the child component Pass the state value to the method props received in step 2.

constructor(props) {
 super(props);
 this.state = {
   sample: 'hi',        
 };  
 }

 render(){
   this.props.method(this.state.sample)

   return(
     <></>
   )

You will get your state value in StateValue Method from the props in your parent component.

score 0 · Answer 2 · answered Oct 08 '20 at 03:41

Try this:

class ParentComponent extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
          sample: '',        
        };  
    }

      render(){
        return(   
          <ChildComponent sample={this.state.sample} setState={(sample) => this.setState({ sample })} />
          )
         }        
        }

class ChildComponent extends React.PureComponent {    
// you can now call this.props.setState(value); to set parent component state.
// and access the sample state: this.props.sample;
    }

score 0 · Answer 3 · answered Oct 08 '20 at 03:44

One option is to specify a callback as a prop. Like this:

class ParentComponent extends React.PureComponent {
      onSample = (sample) => {
          // handle sample
       }

       render(){
        return(   
        //IN HERE I'm calling child parent    
          <ChildComponent
            callback={this.onSample}
          />
        )
        }        
      }

class ChildComponent extends React.PureComponent {  
    constructor(props) {
        super(props);
        this.state = {
          sample: '',        
        };
        this.onSample = props.callback
        // call later on via this.onSample(<sample>);
    }

how to pass state from child component to parent component in reacts

3 Answers3