Reactで4択クイズを繰り返し処理を使って"正解","不正解"を表示したい

前提・実現したいこと

Reactで４択クイズを作っています。
機能はボタンをクリックしたら"正解です","不正解です"が表示されるという機能です。
問題を繰り返し処理を使って問題の内容だけ変えて表示したいと思っています。

該当のソースコード

import React, { useState } from 'react'
import Button from '@material-ui/core/Button'
//import Proptypes from 'prop-types'


function HakoneQuizA() {

    const QuestionLists=[
        {Question:"1.早稲田出身の選手は?",Answers:["大迫傑選手","服部勇馬選手","中村匠吾選手","相澤晃選手"],Correct:"大迫傑選手"},
        {Question:"2.東洋出身の選手は?",Answers:["大迫傑選手","服部勇馬選手","中村匠吾選手","相澤晃選手"],Correct:"服部勇馬選手"},
        {Question:"3.駒澤出身の選手は?",Answers:["大迫傑選手","服部勇馬選手","中村匠吾選手","相澤晃選手"],Correct:"中村匠吾選手"}
      ]
  
    const [state, setState] = useState({open: false,correct: true,});
  

  return (
    <div>
     
      <h1> {QuestionLists[0].Question}</h1>
      <ul>
    <Button onClick={()=>setState({open: !state.open,correct:true})}variant="contained" >
    {QuestionLists[0].Answers[0]}
    </Button>
    <Button onClick={()=>setState({open: !state.open,correct:false})}variant="contained" >
    {QuestionLists[0].Answers[1]}
    </Button>
    <Button onClick={()=>setState({open: !state.open,correct:false})}variant="contained" >
    {QuestionLists[0].Answers[2]}
    </Button>
    <Button onClick={()=>setState({open: !state.open,correct:false})}variant="contained" >
    {QuestionLists[0].Answers[3]}
    </Button>
    </ul>

  {state.open ? (
      <div>
        { state.correct ? '正解' : '不正解' }
      </div>
  ) : null}
  </div>
 
  

);


}

export default HakoneQuizA;

試したこと

1.<div></div>の中をコピー&ペーストしましたが、例えば、一番の問題を解いたときに他の問題の答えも一緒に表示されてしまいました.。

行動規範の内容に同意します

回答1件

ベストアンサー

QuestionListsに選択した答えも持たせてstate化するのが一番楽だと思います。
動作デモ

javascript
1import { useState } from 'react'
2
3const QuestionLists = [
4  {
5    Question: '1.早稲田出身の選手は?',
6    Answers: ['大迫傑選手', '服部勇馬選手', '中村匠吾選手', '相澤晃選手'],
7    Correct: '大迫傑選手',
8    selectedAnswer: ''
9  },
10  {
11    Question: '2.東洋出身の選手は?',
12    Answers: ['大迫傑選手', '服部勇馬選手', '中村匠吾選手', '相澤晃選手'],
13    Correct: '服部勇馬選手',
14    selectedAnswer: ''
15  },
16  {
17    Question: '3.駒澤出身の選手は?',
18    Answers: ['大迫傑選手', '服部勇馬選手', '中村匠吾選手', '相澤晃選手'],
19    Correct: '中村匠吾選手',
20    selectedAnswer: ''
21  }
22]
23
24export default function App() {
25  const [qLIsts, setqLists] = useState(QuestionLists)
26  const inputAnswer = (selectedAnswer, targetIndex) => {
27    setqLists(qLIsts.map((list, index) => (index === targetIndex ? { ...list, selectedAnswer } : list)))
28  }
29
30  return (
31    <div>
32      {qLIsts.map(({ Question, Answers, Correct, selectedAnswer }, index) => {
33        return (
34          <div key={Question}>
35            <h1>{Question}</h1>
36            <div>
37              {Answers.map((answer) => {
38                return (
39                  <button key={answer} onClick={() => inputAnswer(answer, index)}>
40                    {answer}
41                  </button>
42                )
43              })}
44            </div>
45            {selectedAnswer && <div>{Correct === selectedAnswer ? '正解' : '不正解'}</div>}
46          </div>
47        )
48      })}
49    </div>
50  )
51}
52