React quiz where question have two answers

Question

I have a quiz where a question will have two answers. One answer should be selected from one set(4 options) and another from another set(4 options). when both the answers are selected(colored), we move to another question. I am having isuue when moving to next question only both the answers are selected. For example: In the first question, when user click Paris and Paris1 as answers then only it should go to next question.

This is questions array format:

const questions = [
    {
      questionText: "What is the capital of France?",
      answerOptions: [
        { answerText: "New York", isCorrect: false },
        { answerText: "London", isCorrect: false },
        { answerText: "Paris", isCorrect: true },
        { answerText: "Dublin", isCorrect: false }
      ],
      answerOptions1: [
        { answerText: "New York1", isCorrect: false },
        { answerText: "London1", isCorrect: false },
        { answerText: "Paris1", isCorrect: true },
        { answerText: "Dublin1", isCorrect: false }
      ]
    }
  ];

In the following code, i tried to display next question only when two options(answers) are clicked from each sets()

  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [showScore, setShowScore] = useState(false);
  const [score, setScore] = useState(0);
  const [choiceOne, setChoiceOne] = useState(false);
  const [choiceTwo, setChoiceTwo] = useState(false);

const handleAnswerOptionClick = (isCorrect) => {
    setChoiceOne(true);
    if (isCorrect) {
      setScore(score + 1);
    }

    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < questions.length && choiceOne && choiceTwo) {
      setCurrentQuestion(nextQuestion);
      setChoiceOne(false);
    } else {
      setShowScore(true);
    }
  };

  const handleAnswerOptionClick1 = (isCorrect) => {
    setChoiceTwo(true);
    if (isCorrect) {
      setScore(score + 1);
    }

    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < questions.length && choiceOne && choiceTwo) {
      setCurrentQuestion(nextQuestion);
      setChoiceTwo(false);
    } else {
      setShowScore(true);
    }
  };

codesandbox link : https://codesandbox.io/s/lucid-zeh-5ulr5z?file=/src/App.js

Answer 1

I was able to solve your problem by refactoring your handleOnClick functions

const handleAnswerOptionClick = (isCorrect) => {
    setChoiceOne((prevState) => !prevState);
    if (isCorrect) {
      setScore(score + 1);
    }

    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < questions.length && choiceTwo) {
      setCurrentQuestion(nextQuestion);
      setChoiceOne((prevState) => !prevState);
    } else if(nextQuestion < questions.length && !choiceTwo){
      return;
    }else {
      setShowScore(true);
    }
  };

I changed this line (nextQuestion < questions.length && choiceTwo) so that the first function will only rely on choiceTwo if the user has chosen an option on the second set of options. I also added an else if statement which returns nothing when the user has not clicked anything from the second set of options yet. Please re-apply this changes to your other handleOnClick function so that it would work both ways. Lastly, when using setState a lot inside functions, please use this format setChoiceOne((prevState) => !prevState) in order to be sure that we are using the right previous state