Access updated state values of child from parent in react

Question

I have one component 'Checkin', which further includes a child component 'CheckinGraph'. Checkin graph component has three states values which initialize to 0 but, on the ComponentDidMount life cycle, their values change from 0 to specific values. I want to access these state variables from the parent component.

Here is my code by which I access these state variables.

Child Component

class CheckinGraph extends React.PureComponent{
    constructor(props)
    {
        super(props)
        this.state={
         totalMaleCount:0,
         totalFemaleCount:0,
         totalUnspecifiedCount:0
      }
    }

//Callback function for parent

getCount=()=>
    {
        let { totalMaleCount, totalFemaleCount, totalUnspecifiedCount}=this.state;
        let arr=[totalCount,totalMaleCount,totalFemaleCount, totalUnspecifiedCount];
        return arr;
    }
   componentDidMount()
    {
     this.setState({totalMaleCount:res.data.maleListCount}); //data is coming from API
     this.setState({totalFemaleCount:res.data.femaleListCount});
     this.setState({totalUnspecifiedCount:res.data.notSpecified});

     }
}

Parent component


class CheckIn extends React.Component{
    constructor(props)
    {
     this.state={}
     this.graph=React.createRef();
    }

 componentDidMount()
    {
        let total=this.graph.current.getCount();
        console.log(total);

    }
render()
{
return(
<div>
<CheckinGraph ref={this.graph} />
</div>
)
}
}

Now the problem is, I able to access values from child to parent, but it is the initial values, not the updated values. Any idea what I am doing wrong?

setState is asynchronous, so the `componentDidMount` will fire before the state update has happened. If you want to get specific values from the child, you could technically pass a callback that the child calls that will run on the parent. But why do you need to do this in the first place? I bet theres a better way/implementation to handle what you are trying to do without the hackery — John Ruddell, Jun 16 '20 at 05:54
you should move all your state into the parent component to start with — Red Baron, Jun 16 '20 at 05:57
Instead of making API call from Child, make it from Parent this way you don't have to access data of child from parent. Or else create a method in Parent and pass it as Props, and set the data using that method from child once the data is arrived from backend — Nithish, Jun 16 '20 at 05:58
It really depends on what the current system is, if theres 100 children, maybe it makes more sense for the child to set the data. But you could use context here instead of passing state and callbacks which would probably be the better implementation. I think the OP should help explain the current setup more so we know what is happening. — John Ruddell, Jun 16 '20 at 06:00
@NithishGandesiri, it works thanks. I made states in the parent, passed method as props in child, and change state values once data came from the backend. — Pranay kumar, Jun 16 '20 at 07:13

Chetan Jain · Accepted Answer · 2020-11-13T05:58:44.800

0

Two approaches:

Use Redux to manage state and then dispatch an action from CHild Component
Pass onChange Function to Child Component and whenever value updated to call the function from Child Component. The onChange Function is where you will have access to updated value and then you can do whatever you want to do in Parent.

edited Nov 13 '20 at 05:58

answered Jun 16 '20 at 06:31

Chetan Jain

236
6
16

or use react context here so you dont have to pull in a whole new package if its not needed. – John Ruddell Jun 16 '20 at 06:55

Access updated state values of child from parent in react

1 Answers1