React state update not working with setState

Question

Okay so it's simple

I have an array of answers inside an array of questions. the user has the option to select more than one answer.

When an answer is selected, the text should change to selected and unselected if it isn't selected.

These are the steps i've tried to update my state

step 1 using map

setTestInfo((state) => { const allStateQuestions = state.info.questions; const currentQuestion = allStateQuestions.filter( (question) => question.id === questionId )[0]; const allAnswersMap = currentQuestion.answers.map((answer) => answer.id === answerId ? (() => { answer.is_chosen = !answer.is_chosen; return answer; })() : answer ); currentQuestion.answers = allAnswersMap; return { ...state, info: { ...state.info, questions: allStateQuestions, }, }; });

step 2 using find

setTestInfo((state) => { const allStateQuestions = state.info.questions; const currentQuestion = allStateQuestions.filter( (question) => question.id === questionId )[0]; const currentAnswer = currentQuestion.answers.find( (answer) => answer.id === parseInt(answerId) ); currentAnswer.is_chosen = !currentAnswer.is_chosen; // i even went to the extend of reassigning it yet it doesn't work currentQuestion.answers.filter((answer) => answer.id === answerId)[0] = currentAnswer; return { ...state, info: { ...state.info, questions: allStateQuestions, }, }; });

Well after using the sample logics above, none of them seem to work Thanks in advance

Drew Reese · Accepted Answer · 2021-11-19 19:56:24Z

Issue

You are mutating the state in both cases. I'll cover the first snippet.

setTestInfo((state) => { const allStateQuestions = state.info.questions; // <-- reference to state const currentQuestion = allStateQuestions.filter( // <-- reference to state (question) => question.id === questionId )[0]; const allAnswersMap = currentQuestion.answers.map((answer) => answer.id === answerId ? (() => { answer.is_chosen = !answer.is_chosen; // <-- state mutation!! return answer; })() : answer ); currentQuestion.answers = allAnswersMap; // <-- state mutation!! return { ...state, info: { ...state.info, questions: allStateQuestions, // <-- saved reference back into state }, }; });

The currentQuestion.answers object of the state.info.questions state was mutated and the state.info.questions array reference never changed so React isn't "seeing" this as an update and isn't triggering a rerender.

Solution

Apply the immutable update pattern. You must shallow copy all updates into new array and object references.

setTestInfo((state) => { return { ...state, info: { ...state.info, // new questions array questions: state.info.questions.map(question => question.id === questionId ? { // new question object ...question, // new answers array answers: question.answers.map(answer => answer.id === answerId ? { // new answer object ...answer, is_chosen: !answer.is_chosen, } : answer ), } : question ), }, }; });

Collectives™ on Stack Overflow

React state update not working with setState

step 1 using map

step 2 using find

1 Answer 1

Issue

Solution

Comments

Hot Network Questions

Collectives™ on Stack Overflow

step 1 using map

step 2 using find

1 Answer 1

Issue

Solution

Comments

Related