State not changing after calling this.setState

Question

I am getting the data from my form component and trying to set the state of my app component with this data.

However, the state.data is an empty object and is not up

Answer 1

As per the react docs, setState is an asynchronous call. You can ensure your state has updated to perform a particular action in two ways as shown below:

1. You can pass the setState a function which will have your current state and props and you the value you return will be your next state of the component. Keep in mind following:

state is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from state and props.

Following is an example:

 this.setState((state, props) => {
      //do something
      return {counter: state.counter + props.step};
    });

2. You can pass a callback to the setState function as mentioned in Dinesh's answer. The callback will be executed once the state has been updated successfully hence ensuring you will have the updated state in the call back.

Following is an example:

this.setState({ ...new state }, () => {
 // do something
});

Hope it helps.