Reactのクイズアプリで正答数を集計して表示したい。

Question

前提・実現したいこと

Reactでクイズアプリを作っています。
クイズの正解数を集計して最後に「◯問中◯問正解です。」と表示したいです。

該当のソースコード

import React, { useState } from 'react';
import Navbar from './Navbar';
import PropTypes from 'prop-types';
import { LikeButton } from './LikeButton';
//import { QuizCorrectCount } from './QuizCorrectCount'
import QuizComment from './QuizComment';
import './index.css' 

function QuestionPage({ QuestionLists }) {
  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 (
                  <a  className="btn btn--red btn--radius btn--cubic"  style={{marginTop: 20, marginBottom:30,marginLeft:30,}} key={answer} onClick={() => inputAnswer(answer, index)}>
                    {answer}
                    <i className="fas fa-angle-right fa-position-right"></i></a>
                )
              })}
            </div>
            {selectedAnswer && <div className="Correct">{Correct === selectedAnswer ? '正解' : '不正解'}</div>}
            <LikeButton />
          </div>
        )
      })}
      
      　<QuizComment />

    </div>
    
  )
}


QuestionPage.propTypes = {
  QuestionLists:PropTypes.func
}

export default QuestionPage; 

//import { PinDropSharp } from '@material-ui/icons';
import React from 'react'
//import Navbar from './Navbar';
import QuestionPage from './QuestionPage'

const  HakoneQuizFrom1Lists= [
  {
    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 HakoneQuizFrom1() {
  return <QuestionPage QuestionLists={HakoneQuizFrom1Lists} />;
}

試したこと

countUp関数を使って色々と試行錯誤しましたがうまくできませんでした。

Answer 1

以下のコードで正答数が取れるので、このcorrectAnswersをQuestionPageコンポーネントの好きな場所で使ってください。
(useMemoは無くてもいいですが一応)

const correctAnswers = useMemo(() => qLIsts.filter(({ Correct, selectedAnswer }) => Correct === selectedAnswer).length, [qLIsts])

追記：
qLIstsのIが小文字になっていたのと、selectedAnswerのsが間違って大文字になってしまっていました。

それと前回自分が書いた回答のせいですが、「qLIsts」のIが大文字になっているのは素でタイプミスでした。
語句の切れ目でもないので「qLists」の方が分かりやすかったです、すいません。

Comments

[tatsu-maru]

回答していただきありがとうございます!
教えていただいたコードを書き、QuestionPageコンポーネントの中で{correctAnswers}を書くと、
「error 'qLists' is not defined」
というエラーが出ました。
「qLists→qLIsts」に変えるとエラーは無くなり0が表示されたのですが、クイズの正解のボタンを押しても数字が増えませんでした。
この時の対処法があれば教えていただきたいです。

[tatsu-maru]

qLIsts→qLists,
SelectedAnswer→selectedAnswer
に変更すると、数字がカウントされました！
何度も回答していただきありがとうございます！!