passing data from child to parent component - react - via callback function

Question

passing data from child to parent component via callback function but somehow it\'s not working. what am I doing wrong here? passing data from child to parent component - re

Answer 1

In your Child Component, you have written following code:

passingProps(e){
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({
     text:newInput
  });
  this.props.getInput(this.state.text);
}

The issue is due to the asynchronous behaviour of setState function. It means you can not call setState on one line and expect its updates on next line. Use the callback function of setState to call the function of parent component just like this:

passingProps(e){
  var newInput=e.target.value;
  //alert(newInput);
  this.setState({ text: newInput }, () => {
     this.props.getInput(this.state.text);
  })
}

Same thing is happening in handleInput function of App component.