Update parent component State from child component in react js

Question

I am setting a state into child component on event perform and want to sent this to Parent component. I searched for this on SO. But still didn't found any way to do this.

Let say i have a parent component Home, and have child component User. I am performing some event in User component, and at that time, i want to pass data to Home component. How can i do this?

Below is my code:

/* Parent component */

import React, { Component } from 'react';
import User from './user';

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
           isReportSent: false
        }   
    }
    render(){
        <Switch>
           <Route exact path="/" component={User}/>
        </Switch>
    }
}

/* child component */
class User extends React.Component{
    constructor(props){
        super(props)
    }
    render(){

    }
}

Note: My parent component is Routing component, in which i am routing my child component on particular path. So can't pass any function to child component.

Please paste your child and parent component code so I can help you. — Harish Soni
– Harish Soni, Commented Dec 24, 2018 at 11:42
Why do not you pass the callback function as extra prop from parent to child and call that callback from the child component — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Dec 24, 2018 at 13:48

user8211511 · Accepted Answer · 2018-12-24 12:14:30Z

3

import React, { Component } from "react";
class Home extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
    onChildAPICall = result => {
      console.log(result);
    };

    render() {
      return <User onAPICall={this.onChildAPICall} />;
    }
}

class User extends Component {
   constructor(props) {
     super(props);
     this.state = {};
     this.API = "https://apicall";
   }

   makeAnAPICall = async () => {
     let result = await fetch(this.API);
     this.props.onAPICall(result);
   };

   render() {
     return <button onClick={this.makeAnAPICall}>API Call</button>;
   }
}

export default Home;

answered Dec 24, 2018 at 12:14

user8211511

311 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jsw324 · Accepted Answer · 2018-12-24 11:42:58Z

1

Something like this would work. I'm not sure if the below is 100% functioning as I just wrote it quickly but the idea is to pass down setState() as a prop from parent to child. So when child calls setState from props it's setting state in the parent component.

 class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: []
    }
  }

  render () {
    <ChilComponent setState={this.setState} />
  }
}

const User = async ({ setState }) => {
  const receivedData = await getDataHowever(params)
  setState({
    data: receivedData
  })
  return (
  <p>Got data!</p>
  )
}

answered Dec 24, 2018 at 11:42

jsw324

8127 silver badges14 bronze badges

1 Comment

Todd Over a year ago

Yes, this is the easiest way -- pass a function to the child component as props that sets state. The only other way is to get redux or some state management involved. This should be the accepted answer.

Chetan Singhal · Accepted Answer · 2018-12-24 12:25:20Z

0

You can call callback function of parent from child component and in parent you can set the state based on callback response.

import React, { Component } from "react";

class Home extends Component {
    constructor(props) {
      super(props);
      this.state = { }
    }
    setStateOfParent= result => {
      this.setState({result : result});
    }

    render() {
      return <User setStateOfParent={this.setStateOfParent} />;
    }
}

class User extends Component {
   constructor(props) {
     super(props);
     this.state = {};
     this.API = "https://apicall";
   }

   makeAnAPICall = async () => {
     let result = await fetch(this.API);
     this.props.setStateOfParent(result);
   };

   render() {
     return <button onClick={this.makeAnAPICall}>API Call</button>;
   }
}

export default Home;

answered Dec 24, 2018 at 12:25

Chetan Singhal

1245 bronze badges

1 Comment

user10742206 Over a year ago

My parent component is, where i am performing routing, so as you call child component inside parent like: <Child component>. I am not doing this. Do you have another option?

Ajay Singh Beniwal · Accepted Answer · 2018-12-24 13:58:26Z

0

Your explanation is not all clear what you want to acheive but as a simple pattern you can pass the callback prop to the child component using render method of react router

Parent Component

<Route exact path="/" render={(props) => <User {...props} callback={this.callback} />}/>

Child Class

this.props.callback(data)

answered Dec 24, 2018 at 13:58

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

Comments

Antier Solutions · Accepted Answer · 2021-06-21 10:57:51Z

0

@user10742206 The best way is to create an independent component and include it as a child in any parent component. Then you can pass a callback function from parent and child can use it to send back any data to parent.

answered Jun 21, 2021 at 10:57

Antier Solutions

1,4229 silver badges10 bronze badges

Collectives™ on Stack Overflow

Update parent component State from child component in react js

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related