Reactの4択クイズアプリをオブジェクト指向で書きたい

Question

前提・実現したいこと

Reactで4択クイズアプリを作っています。
前回の質問（Reactで4択クイズを繰り返し処理を使って"正解","不正解"を表示したい）でクイズアプリのページの作り方を教えていただきました。
「箱根駅伝クイズ」と「進撃の巨人クイズ」のページを作ったのですが、例えばcssを変えたときに二つのページを変える必要があります。
そこで、オブジェクト指向で書く方法を教えていただきたいです。

該当のソースコード

import React, { useState } from 'react'
import Navbar from './Navbar';
const QuestionLists = [
  {
    Question: '1.早稲田大学出身の選手は?',
    Answers: ['大迫傑選手', '服部勇馬選手', '中村匠吾選手', '相澤晃選手'],
    Correct: '大迫傑選手',
    selectedAnswer: ''
  },
  {
    Question: '2.東洋大学出身の選手は?',
    Answers: ['佐藤悠基選手', '服部勇馬選手', '中村匠吾選手', '伊藤達彦選手'],
    Correct: '服部勇馬選手',
    selectedAnswer: ''
  },
  {
    Question: '3.駒澤大学出身の選手は?',
    Answers: ['塩尻和也選手', '竹澤健介選手', '中村匠吾選手', '相澤晃選手'],
    Correct: '中村匠吾選手',
    selectedAnswer: ''
  },
  {
    Question: '4.東海大学出身の選手は?',
    Answers: ['館沢亨次選手', '神野大地選手', '中村匠吾選手', '相澤晃選手'],
    Correct: '館沢亨次選手',
    selectedAnswer: ''
  },
  {
  Question: '5.青山学院大学出身の選手は?',
  Answers: ['館沢亨次選手', '一色恭志選手', '村山謙太選手', '村山紘太選手'],
  Correct: '一色恭志選手',
  selectedAnswer: ''
}

]

export default function App() {
  const [qLIsts, setqLists] = useState(QuestionLists)
  const inputAnswer = (selectedAnswer, targetIndex) => {
    setqLists(qLIsts.map((list, index) => (index === targetIndex ? { ...list, selectedAnswer } : list)))
  }

  return (
    <div>
      <header><Navbar /></header>
      {qLIsts.map(({ Question, Answers, Correct, selectedAnswer }, index) => {
        return (
          <div key={Question}>
            <h1>{Question}</h1>
            <div>
              {Answers.map((answer) => {
                return (
                  <button key={answer} onClick={() => inputAnswer(answer, index)}>
                    {answer}
                  </button>
                )
              })}
            </div>
            {selectedAnswer && <div>{Correct === selectedAnswer ? '正解' : '不正解'}</div>}
          </div>
        )
      })}
    </div>
  )
}

該当のソースコード

import React, { useState } from 'react'
import Navbar from './Navbar';
const QuestionLists = [
  {
    Question: '1.この中で同期でないのは',
    Answers: ['エレン', 'ジャン', 'オルロ', 'マルコ'],
    Correct: 'オルロ',
    selectedAnswer: ''
  },
  {
    Question: '2.3つの壁の名前で正しくないのは?',
    Answers: ['ウォール・マリア', 'ウォール・シーナ', 'ウォール・ローゼ', 'ウォール・アテナ'],
    Correct: 'ウォール・アテナ',
    selectedAnswer: ''
  },


]

export default function App() {
  const [qLIsts, setqLists] = useState(QuestionLists)
  const inputAnswer = (selectedAnswer, targetIndex) => {
    setqLists(qLIsts.map((list, index) => (index === targetIndex ? { ...list, selectedAnswer } : list)))
  }

  return (
    <div>
      <header><Navbar /></header>
      {qLIsts.map(({ Question, Answers, Correct, selectedAnswer }, index) => {
        return (
          <div key={Question}>
            <h1>{Question}</h1>
            <div>
              {Answers.map((answer) => {
                return (
                  <button key={answer} onClick={() => inputAnswer(answer, index)}>
                    {answer}
                  </button>
                )
              })}
            </div>
            {selectedAnswer && <div>{Correct === selectedAnswer ? '正解' : '不正解'}</div>}
          </div>
        )
      })}
    </div>
  )
}

試したこと

Answersの中をpropsで継承する方法を試しましたが自分ではうまくできませんでした。

Answer 1

ここでオブジェクト指向が出てくるのがなぜかわからないのですが、違うのはQuestionListsだけのようなので、これをpropsとして取るようにすれば実現できそうです。

const shingekiQuestionLists = [];

export function ShingekiQuestionPage() {
  return <QuestionPage QuestionLists={shingekiQuestionLists} />;
}

const ekidenQuestionLists = [];

export function EkidenQuestionPage() {
  return <QuestionPage QuestionLists={ekidenQuestionLists} />;
}

function QuestionPage({ QuestionLists }) {
  const [qLIsts, setqLists] = useState(QuestionLists)
  ...
}

Comments

[tatsu-maru]

ありがとうございます!
教えていただいたコードで自分のやりたいことができました!
オブジェクト指向については自分が間違った理解をしていました。