passing data from child to parent component - react - via callback function
There are a couple of issues.
1) You have to bind passingProps
constructor(){
super();
this.state={
text:''
}
this.passingProps = this.passingProps.bind(this);
}
2) this.setState
is asynchronous, so it's not guaranteed that this.state.text
will be set to the value you want by the time you pass it to this.props.getInput
. You can either do
this.props.getInput(newInput)
or
this.setState({ text: newInput }, () => {
this.props.getInput(this.state.text);
})
to resolve that issue.
class App extends React.Component{
constructor(props){
super(props);
this.state={
input:'this is the input for now'
}
this.handleInput=this.handleInput.bind(this);
}
handleInput(event){
let value = event.target.value;
this.setState({
input:value
});
}
render(){
return(
<div>
<h1>{this.state.input}</h1>
<Child getInput={this.handleInput} />
</div>
);
}
}
class Child extends React.Component{
constructor(){
super(props);
}
render(){
return(
<div>
<input type="text" placeholder="please input a name..." onChange={this.props.getInput} />
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
Here is the answer for your question. I hope your proplem is solved.