[FIXED] how to increment a state inside dot function in React.js

Issue

so i'm basically trying to create a quiz app where i need to keep a track of score meaning how many times a user has clicked the right answer button,

so the issue is i've implemeted a logic about whenever a user clicks as follows; and i wanted to add an increment state when ever

i.id === selectedAnsId && i.answer === correctAns ? {
setScore(prev => prevScore + 1)
}

Page1.jsx:

  function handleSelect(id, selectedAnsId) {
    
    setQuizData((prevQuizData) => {
      return prevQuizData.map((question) => {
        const correctAns = question.correct_answer;
        return question.id === id
          ? {
              ...question,
              answers: question.answers.map((i) => {
                return i.id === selectedAnsId
                  ? {
                      ...i,
                      selectedAns: i.answer,
                      isSelected: !i.isSelected
                    }
                    //the condition below is when i want to increment my state
                  : i.id === selectedAnsId && i.answer === correctAns
                  ? {
                      ...answer,
                      selectedAns: i.answer,
                      correctAns: selectedAns,
                      isSelected: !i.isSelected,                    / 

                   //here i want to increment my state
                    }
                 
                  : i.id === selectedAnsId && i.answer !== correctAns
                  ? {
                      ...answer,
                      selectedAns: i.answer,
                      isSelected: true
                    }
                    
                  : { ...i, isSelected: false };
              })
            }
          : question;
      });
    });
    
    console.log(count);
  }

so i tried to increment inside these dot fucntion, but the state did not change instead it kept logging 0 ,
i want to know a solution to increment (if posiible inside my ...fucntion) a state when the condition selectedAns is === correctAns is met, or even if it is possible to increment a state inside dot dunction

P.S i've even tried to increment it outside the dot fucntion

Solution

If you necessarily want to increment at the place where you placed the comment, you could add a immediately invoked function like this:

function handleSelect(id, selectedAnsId) {
  setQuizData((prevQuizData) => {
    return prevQuizData.map((question) => {
      const correctAns = question.correct_answer;
      return question.id === id
          ? {
              ...question,
              answers question.answers.map((i) => {
                return i.id === selectedAnsId
                  ? {
                      ...i,
                      selectedAns: i.answer,
                      isSelected: !i.isSelected,
                    }
                  : //the condition below is when i want to increment my state
                  i.id === selectedAnsId && i.answer === correctAns
                  ? (() => {
                      //here i want to increment my state
                      setScore((prev) => prevScore + 1);

                      return {
                        ...answer,
                        selectedAns: i.answer,
                        correctAns: selectedAns,
                        isSelected: !i.isSelected,
                      };
                    })()
                  : i.id === selectedAnsId && i.answer !== correctAns
                  ? {
                      ...answer,
                      selectedAns: i.answer,
                      isSelected: true,
                    }
                  : { ...i, isSelected: false };
              }),
            }
          : question;

    });
  });
}

But I think it would be way better to imply from the selected answer whether it was correct, and increment the score before the return part inside .map(), somewhat like this:

function handleSelect(id, selectedAnsId) {
  setQuizData((prevQuizData) => {
    return prevQuizData.map((question) => {
      const correctAns = question.correct_answer;

      return question.id === id
        ? {
            ...question,
            answers: question.answers.map((i) => {
          const hasUserAnsweredCorrectly =
          i.id === selectedAnsId && i.answer === correctAns;

          if (hasUserAnsweredCorrectly) {
            setScore((prev) => prevScore + 1);
           }

              return i.id === selectedAnsId
                ? {
                    ...i,
                    selectedAns: i.answer,
                    isSelected: !i.isSelected,
                  }
                : 
                hasUserAnsweredCorrectly
                ? {
                    ...answer,
                    selectedAns: i.answer,
                    correctAns: selectedAns,
                    isSelected: !i.isSelected,
                  }
                : i.id === selectedAnsId && i.answer !== correctAns
                ? {
                    ...answer,
                    selectedAns: i.answer,
                    isSelected: true,
                  }
                : { ...i, isSelected: false };
            }),
          }
        : question;
    });
  });
}

Answered By - maxeth
Answer Checked By - - Katrina (ReactFix Volunteer)