State Setter Not Updating State

[tight cedar]

Been struggling with this one for a few days now. On the quizzical solo project of the React course.

I want to conditionally update the quizArray state to reflect whether the user clicked the correct answer or not. I've tried this a number of ways (map, forEach, simple for loop) and each doesn't properly update state. Instead, the 'quizArray' state returns to it's previous value.

I've tried lazy state initialization and adding console.logs for every stateSetter to see if I was accidentally firing off any new renders, but nothing fires.

The "newArray" in the code below is always correct, but yet the state "quizArray" is never actually updated.

Would love any insight or help, perhaps there's a larger conceptual react piece that I'm missing here.

Code is too long to send in discord, so heres the github link.

https://github.com/JohnAlexR/scrimba-quizzical/tree/main/src

path is src/quiz. Function in question is called "selectAnswer" and state in question is 'quizArray'.

Thanks in advance as this has been driving me crazy!!

[tight cedar]

I should also add that I know that this is probably a better way to code it, but doesn't work all the same: `function selectAnswer(answer) {
const updatedArray = quizArray.map(question => {
if (answer === question.correct_answer) {
return { ...question, isCorrect: true };
}
return { ...question };
});

setQuizArray(updatedArray);
}
`

[dusk niche]

You initially update quizArray in a useEffect. Have you done a console log of quiz array to see that the object was set in state there first? You initialize the state of quizArray with a function. You CAN do that, but not sure why you are doing that. You can initialize it to null or even an empty string instead of a function that runs a console log.

I didn’t dig deep into the code yet to see what’s going on, but adding a console log (where you console log “api useEffect ran) to verify that the object you are updating quizArray state with would be where I’d start. If that checks out, then move on. The only reason I say this is because you are using a spread operator when you try to update this state later. If it was never updated with the object you had in the useEffect, it will use the initial state which is a function.

Also not sure what version of React you are using. I know scrimba used an older version before, but not sure if it’s been updated recently. If you are doing this on VScode and have a more recent react version, you can leave out React in React.useState(), you can just use useState. If this is from a scrim I wouldn’t change it perhaps due to what version they are using unless you get an error that points to that.

If your console log for the updated state in the useEffect doesn’t give you the results you wanted, change the initial state to null or maybe an empty string. I think having it as a function will create problems for you with what you want to do.

[sleek cedar]

First of all, well done to get this far of the course! 🥳
I'll fork your repo and make PR with some suggestions in it.

[tight cedar]

Thank you!!!!

[sleek cedar]

@tight cedar sorry it took this long, work got very busy + life got in the way 😦

https://github.com/JohnAlexR/scrimba-quizzical/pull/1

[tight cedar]

No problem at all, thank you so much for taking the time. I've been going through them slowly and really appreciate the insight. I hadn't ever asked any questions before (to this chat, or anywhere for that matter - i have a bad habit of DIYing everything) but I see now the value of the community here on Scrimba and the dev world in general. I look forward to paying it forward one day!

[sleek cedar]

I used to be the same, but there is so much value in asking questions at the right time. I wouldn't say that ask a question every time you tumble upon a problem. Once you have exhausted most of your resources and still not happy with the result or you feel something could be done better that's a good time to ask questions imo. 🙂