CODEWITHSUNDEEP
reactjs
RRR uzumaki
RRR uzumaki

Reputation: 1328

Passing data from child to parent and setting state

i am a child and parent component where i am trying to pass data from child to parent but the issue is after passing the data and setting a state to it i get nothing in console when i console.log it the first time but then after clicking the submit button second time i am getting the result or say it is running behind 1 step..

I did it like this

parent component

import Todoinput from './components/todo-input';


class App extends React.Component{
constructor(props){
super(props);
this.state={
  item:''
}
}

onsearch=(term)=>{

console.log(term)
this.setState({item:term})
console.log(this.state.item)
}

render(){
return (
  <div className="app">
  <div className="todoinput">
  <Todoinput onafter={this.onsearch}/>
  </div>
  </div>
) 
} 
}

export default App;

so here after submitting the form when in onsearch function i try to console log (this.state.item) for the very first time i get empty result but in the same function when i first console log (term) i am getting the result

Output:

enter image description here

child component

class Todoinput extends React.Component{
constructor(props){
    super(props);
    this.state={
        term:''
    }
}

onformsubmit=(e)=>{
    e.preventDefault()

    this.props.onafter(this.state.term)
}

onchange=(e)=>{
    this.setState({term:e.target.value})


}

render(){
    return (

        <div className="card p-4">
        <form onSubmit={this.onformsubmit}>
        <div className="form-group">
        <input type="text" onChange={this.onchange} 
   className="form-control" placeholder="Add a Todo Item"/>
        </div>
        <button type="submit" className="btn btn-block btn- 
   primary">Submit</button>
        </form>
        </div>

    )
 }
}
 export default Todoinput;

Upvotes: 1

Views: 282

Answers (3)

Aaron Ross
Aaron Ross

Reputation: 141

So its important to remember in React that setState is asynchronous (checkout that link its very informative) So your state value is getting set, but it isn't immediately available after setting it in that function because its async but your function is synchronous. if you were to plop that console.log into the componentDidUpdate() method you will see that calling setState() will re-render the component with the new state variable;

Upvotes: 1

Victor Matheus da Silva
Victor Matheus da Silva

Reputation: 56

That probably happens because state is "asynchronous". To console log after the state is set, you should call a callback function in this.setState... 

onsearch=(term)=>{
 console.log(term)
  this.setState({item:term}, () => {
    console.log(this.state.item)
 })
}

I hope this helps

Upvotes: 1

marshy101
marshy101

Reputation: 594

this.setState({item:term}) is asynchronous; so the statement console.log(this.state.item) get executed before setState finishes executing.

To log the value after setState has completed, you can pass a function as second parameter to get the state correctly after completion like this:

this.setState({item:term}, () => console.log(this.state.item));

Upvotes: 2

Related Questions