ReactJS post increment does not work in setState

Question

While working with ReactJS setState method to update state I observed that post increment operator was not working(did not get any error as well) so I had to use + 1 instead for the same. Any idea why this behaviour as I am new to React and got shocked to learn this.

Here is my code: This did not work:

this.setState((prevState) => ({
      left: prevState.left++
}));

This worked:

this.setState((prevState) => ({
      left: prevState.left + 1
}));

This is probably the answer you're looking for: https://stackoverflow.com/a/39316556/4810504 — Tom Van Rompaey, Jul 03 '17 at 08:51
this behaviour is not related to `reactjs` or `javascript`, this is how **post-increment** operator works. — Mayank Shukla, Jul 03 '17 at 09:40
thanks for your inputs, its so silly on my part to forget the basics. — Peter, Jul 03 '17 at 11:39

score 2 · Accepted Answer · answered Jul 03 '17 at 08:50

2

x++ expression first returns the value of x then it increments it

this.setState((prevState) => ({
  left: ++prevState.left
}));

should give the expected result

answered Jul 03 '17 at 08:50

taha

997
9
17

2

instead of `++` better to use `+ 1`, `++` will mutate the origin value :) – Mayank Shukla Jul 03 '17 at 09:27
1

absolutely :) it's always a bad idea to mutate a function's params – taha Jul 03 '17 at 09:36
thanks for your inputs, its so silly on my part to forget the basics. – Peter Jul 03 '17 at 11:38

score 1 · Answer 2 · answered Jul 03 '17 at 08:47

1

This is javascript, you are asigning the prevState to the prevState value :

a = 0; 
a = a++;
a == 0 // true
a++
a == 0 // false

answered Jul 03 '17 at 08:47

D. Peter

487
3
12

thanks for your inputs, its so silly on my part to forget the basics. – Peter Jul 03 '17 at 11:38

ReactJS post increment does not work in setState

2 Answers2

Linked