this.state value not updating from console

Question

I have just tried to add value to this.state from browser console in React.

I tried it in two way,

first: used this code $r.state.list[0].a = 2.

second: used react developer extension and changed it from components.

this is the code I'm using:

this.state = {
  list: [
    { a: 5 },
    { b: 6 },
    { c: 1 },
  ],
};

the UI is working based on the state value. If I change the value it would be updated in UI.

I want to change the value from the console and check the UI is changing or not based on the value. If I hard code it will work.

[Why can't I directly modify a component's state, really?](https://stackoverflow.com/q/37755997/1218980) — Emile Bergeron, Feb 05 '20 at 18:16
[Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/q/30782948/1218980) — Emile Bergeron, Feb 05 '20 at 18:17

Shachar · Answer 1 · 2020-02-05T12:38:45.927

You should use setState function instead of mutating state directly you should do:

this.setState({newVal: 5});

and not this.state = {newVal: 5};

The reason you have to use setState and not change it directly is mainly because setState causes rerendering (if nessacry) and changing directly on state object does not.

In addition, notice this.setState is async!! That's way you might not see changes in state if printing it next line

You can though printing state inside render function or you can use the callback of setState ->

this.setState({newVal: 5}, (newState) => console.log(newState));

this.state value not updating from console

1 Answers1