reactjs - How to pass data after the state is set successfully

Question

I have a child component that is passing data to the parent but I have to click 3 times on the data in order for the setState to be successful and I am not sure how to make so that it calls the parent function only when the state is set successfully, below is my code:

child function:

onSelection =(nodeKey, node) =>{
        if(nodeKey.target.localName === "svg")
        {
            return;
        }else
        {
            this.setState({selection: node},
            this.props.setSelectedValue(this.state.selection)); //returns data to parent component
            
        }
      
    }

parent:

setSelectedValue = data =>{
    this.setState({selection: data});
}

Answer 1

You can use arrow functions to do this. Like the below code.

else
{
      this.setState({selection: node},
      () => this.props.setSelectedValue(this.state.selection));
            
}