反应对象和数组

Question

I was trying to match the answers on click based on the correct answer provided in the json, but since i was running a map function to return the data, although i was able to get the value of clicked button from the object but not able to match it with the correct answer with the clicked answer.

below is my code

quiz

import React, { useState } from "react";
import quizData from "../data/quizData.json";

export default function Quiz() {
  const [value, setValue] = useState(quizData);

  function handleClick(e) {
    let answer = value.quiz_questions[0].answer;
    if (answer === e.target.value) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(e.target.value);
    console.log(answer);
  }

  return (
    <div>
      {value.quiz_questions.map((quiz) => {
        return (
          <div key={quiz.id}>
            <p>{quiz.instruction_text}</p>
            {quiz.answer_options.map((btn, index) => {
              return (
                <button key={index} onClick={handleClick} value={btn}>
                  {btn}
                </button>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

quizData

{
  "quiz_questions": [
    {
      "id": 1,
      "instruction_text": "How many continents are there on Planet Earth?",
      "answer_options": ["5", "6", "7", "8"],
      "answer": "7"
    },
    {
      "id": 2,
      "instruction_text": "What's your favorite number?",
      "answer_options": ["1", "2", "3", "4"],
      "answer": "4"
    }
  ]
}

The above code will work for 1st question as i was hardcoding the answer for the 1st object in the array, is there any chance that we can loop through the array and set it with the clicked answer?

Answer 1

You need to find first object:

let answer = value.quiz_questions.find((data) => data.id == id)?.answer;

complete handleClick function logic:

function handleClick(btnValue, id) {
    let answer = value.quiz_questions.find((data) => data.id == id).answer;
    if (answer === btnValue) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(answer);
  }

Here is complete code:

import React, { useState } from "react";
import "./styles.css";

const quizData = {
  quiz_questions: [
    {
      id: 1,
      instruction_text: "How many continents are there on Planet Earth?",
      answer_options: ["5", "6", "7", "8"],
      answer: "7"
    },
    {
      id: 2,
      instruction_text: "What's your favorite number?",
      answer_options: ["1", "2", "3", "4"],
      answer: "4"
    }
  ]
};
function Quiz() {
  const [value, setValue] = useState(quizData);

  function handleClick(btnValue, id) {
    let answer = value.quiz_questions.find((data) => data.id == id).answer;
    if (answer === btnValue) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(answer);
  }

  return (
    <div>
      {value.quiz_questions.map((quiz) => {
        return (
          <div key={quiz.id}>
            <p>{quiz.instruction_text}</p>
            {quiz.answer_options.map((btn, index) => {
              return (
                <button
                  key={index}
                  onClick={(e) => handleClick(btn, quiz.id)}
                  value={btn}
                >
                  {btn}
                </button>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Quiz />
    </div>
  );
}

Here is the demo: https://codesandbox.io/s/hungry-elbakyan-3qm57?file=/src/App.js:0-1429

Answer 2

You can pass the question id in the handleClick method and use that to find out the correct answer. Moreover, instead of passing event, you directly pass the selected answer as well.

export default function Quiz() {
  const [value, setValue] = useState(quizData);

  function handleClick(quesId, selectedAnswer) {
    let answer = value.quiz_questions.filter(question => question.id === quesId)[0].answer;
    if (answer === selectedAnswer) {
      alert("Correct Answer");
    } else {
      alert("Please choose the correct answer");
    }
    console.log(selectedAnswer);
    console.log(answer);
  }

  return (
    <div>
      {value.quiz_questions.map((quiz) => {
        return (
          <div key={quiz.id}>
            <p>{quiz.instruction_text}</p>
            {quiz.answer_options.map((btn, index) => {
              return (
                <button key={index} onClick={() => handleClick(quiz.id, btn)} value={btn}>
                  {btn}
                </button>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

Answer 3

You may try the modified version of your source code(esp. the one with map()), and you'll note that onLoad event has been attached to help in capturing the answer options upon loading of the document, then the handleClick function will pick up from there. That being said, the following is the modified version of the source code beginning after inside return():

    {value.quiz_questions.map((quiz) => {
            return (
              <div key={quiz.id}>
                <p>{quiz.instruction_text}</p>
                {quiz.answer_options.map((btn, index) => {
                  return (
                    <button key={index} onLoad={() => setValue(btn)} onClick={handleClick} value={btn}>
                      {btn}
                    </button>
                  );
                })}
              </div>
            );
    })}