前提・実現したいこと
Reactでクイズアプリを作っています。
クイズの正解数を集計して最後に「◯問中◯問正解です。」と表示したいです。
該当のソースコード
React
1import React, { useState } from 'react'; 2import Navbar from './Navbar'; 3import PropTypes from 'prop-types'; 4import { LikeButton } from './LikeButton'; 5//import { QuizCorrectCount } from './QuizCorrectCount' 6import QuizComment from './QuizComment'; 7import './index.css' 8 9function QuestionPage({ QuestionLists }) { 10 const [qLIsts, setqLists] = useState(QuestionLists) 11 const inputAnswer = (selectedAnswer, targetIndex) => { 12 setqLists(qLIsts.map((list, index) => (index === targetIndex ? { ...list, selectedAnswer } : list))) 13 } 14 15 return ( 16 <div> 17 <header><Navbar /></header> 18 {qLIsts.map(({ Question, Answers, Correct, selectedAnswer }, index) => { 19 return ( 20 <div key={Question}> 21 <h1>{Question}</h1> 22 <div > 23 {Answers.map((answer) => { 24 return ( 25 <a className="btn btn--red btn--radius btn--cubic" style={{marginTop: 20, marginBottom:30,marginLeft:30,}} key={answer} onClick={() => inputAnswer(answer, index)}> 26 {answer} 27 <i className="fas fa-angle-right fa-position-right"></i></a> 28 ) 29 })} 30 </div> 31 {selectedAnswer && <div className="Correct">{Correct === selectedAnswer ? '正解' : '不正解'}</div>} 32 <LikeButton /> 33 </div> 34 ) 35 })} 36 37 <QuizComment /> 38 39 </div> 40 41 ) 42} 43 44 45QuestionPage.propTypes = { 46 QuestionLists:PropTypes.func 47} 48 49export default QuestionPage;
React
1//import { PinDropSharp } from '@material-ui/icons'; 2import React from 'react' 3//import Navbar from './Navbar'; 4import QuestionPage from './QuestionPage' 5 6const HakoneQuizFrom1Lists= [ 7 { 8 Question: '1.早稲田大学出身の選手は?', 9 Answers: ['大迫傑選手', '服部勇馬選手', '中村匠吾選手', '相澤晃選手'], 10 Correct: '大迫傑選手', 11 selectedAnswer: '' 12 }, 13 { 14 Question: '2.東洋大学出身の選手は?', 15 Answers: ['佐藤悠基選手', '服部勇馬選手', '中村匠吾選手', '伊藤達彦選手'], 16 Correct: '服部勇馬選手', 17 selectedAnswer: '' 18 }, 19 { 20 Question: '3.駒澤大学出身の選手は?', 21 Answers: ['塩尻和也選手', '竹澤健介選手', '中村匠吾選手', '相澤晃選手'], 22 Correct: '中村匠吾選手', 23 selectedAnswer: '' 24 }, 25 { 26 Question: '4.東海大学出身の選手は?', 27 Answers: ['館沢亨次選手', '神野大地選手', '中村匠吾選手', '相澤晃選手'], 28 Correct: '館沢亨次選手', 29 selectedAnswer: '' 30 }, 31 { 32 Question: '5.青山学院大学出身の選手は?', 33 Answers: ['館沢亨次選手', '一色恭志選手', '村山謙太選手', '村山紘太選手'], 34 Correct: '一色恭志選手', 35 selectedAnswer: '' 36} 37 38] 39export default function HakoneQuizFrom1() { 40 return <QuestionPage QuestionLists={HakoneQuizFrom1Lists} />; 41} 42
試したこと
countUp関数を使って色々と試行錯誤しましたがうまくできませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/02 13:03
2021/08/02 23:30