0

I am practicing React using Hooks and Context, working on a simple Quiz App. The score should increment to 1 when the answer is correct.

const { qa, questionNumber } = useContext(GlobalContext);
const [score, setScore] = useState(0);

const answerOnClick = (e) => {
  const correct = qa[questionNumber].correct_answer === e ? true : false;

  if (correct) {
    setScore(() => score++);
  }
};

But I'm getting this error on line setScore(() => score++);:

TypeError: Assignment to constant variable

I also tried if (correct) { score++; setScore(() => score); } and setScore(() => ++score), still not working.

But when I try setScore(() => score + 1);, now it increments!

I have learned that the Increment is a valid JS operator. Aren't score++ and score + 1 equivalent? And why score treat as a constant variable? It is mutable, right? I'm still a novice developer. Can someone explain what's happening here? Thank you.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Jonnel VeXuZ Dorotan
  • 418
  • 5
  • 15
  • Does this answer your question? [Const in JavaScript: when to use it and is it necessary?](https://stackoverflow.com/questions/21237105/const-in-javascript-when-to-use-it-and-is-it-necessary) – Emile Bergeron Jul 13 '20 at 19:36
  • Additional reading that could help: [Why can't I directly modify a component's state, really?](https://stackoverflow.com/q/37755997/1218980) [When to use functional setState](https://stackoverflow.com/q/48209452/1218980) – Emile Bergeron Jul 13 '20 at 19:39
  • 1
    I just recalled that `score++` is equivalent to `score += 1`, not `score + 1`, and `score` should not be reassigned. Thanks for the helpful links, @EmileBergeron. – Jonnel VeXuZ Dorotan Jul 13 '20 at 19:59

3 Answers3

2

The problem is, that score is defined as constant. This means that is should not be reassigned. When using score++ you're reassigning it as follows score = score + 1 but as a short hand. Your JavaScript interpreter does not like that you're reassigning a variable which you defined as being constant. Therefore you get the error.

The useState hook provides an update function (in your case setScore) which you should use to update the state. You're not directly changing the value of score. You're telling react to initialise score with a higher value on next render. Your components function is called again with a new declaration of score, this time with a higher value. As you correctly pointed out setScore(() => score + 1) works, however, setScore(score + 1) should work too.

Rodrigo Ehlers
  • 1,830
  • 11
  • 25
0

You mutate the state when you do score++. You should not mutate the state in React because setNum is async.

https://reactjs.org/docs/react-component.html#setstate

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

fmonper1
  • 89
  • 1
  • 1
  • 16
  • While true that we shouldn't mutate the state, it's not what OP is encountering. He's just trying to assign to a `const` value, which throws a `TypeError`. – Emile Bergeron Jul 13 '20 at 19:43
0

score++/++score would mutate the state. The best way to update state based on previous state is this way:

setScore((prevScore) => prevScore + 1);
Matt Aft
  • 8,742
  • 3
  • 24
  • 37