Accepted answer

you should be using the setstate callback i.e a correct way to handle state mutations since setstate takes time to mutate the state and hence any use of state immediately after updating the state may result in the older value and not the updated value.

make use of callback like

cityhandleupdateinput() {
    }, () => {
        const { city } = this.state;

make sure that you are binding the cityhandleupdateinput function in constructor or from where it is being called or otherwise it itself won't be able to access the setstate with this.setstate


setstate won't immediately update this.state. here is the explanation from the react docs:

setstate() does not immediately mutate this.state but creates a pending state transition. accessing this.state after calling this method can potentially return the existing value.

there is no guarantee of synchronous operation of calls to setstate and calls may be batched for performance gains.

that means you'd need to store the value you are passing to setstate, and pass that to your action creator as well. something like this (i didn't run this code, make sure you test it) should work:

cityhandleupdateinput() {
    const city =;
    this.setstate({ city });

Related Query

More Query from same tag