virtual dom and real dom issue while changing state

Question

i am calling console.log just below the setState but it showing my blank array even state has been changed.

let text = reminderText;
let data = [...this.state.reminderText]
data.push(text);
this.setState({reminderText:data})
console.log(this.state.reminderText);

Answer 1

Note that setState() is asynchronous. That means, when your console log is executed, the state is not updated yet.

If you want to print the updated state, use the callback function as shown below.

this.setState(
    {reminderText:data},
    () => console.log(this.state.reminderText)
)

React will invoke the callback function soon after the asynchronous state update is complete.