import { ReactComponentElement, ReactNode } from "react"; import { AnswerType, Question } from "../lib/question"; import { SessionState } from "../lib/session"; import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline"; const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => { const handleOpenClick = () => { setState( (prevState: SessionState) => ({ ...prevState, opened: { ...prevState.opened, [question.id]: !prevState.opened[ question.id ] } })) } const handleAnswerClick = (right: boolean) => { setState( (prevState: SessionState) => ({ ...prevState, answered: prevState.answered + 1, wrong: prevState.wrong + (right ? 0 : 1), right: prevState.right + (right ? 1 : 0), answer: { ...prevState.answer, [question.id]: right ? AnswerType.Right : AnswerType.Wrong } })) question.answered = right ? AnswerType.Right : AnswerType.Wrong; } return (

{question && question.text}

{question && state.opened[ question.id ] ? (

{question.answer}

) : ()}
) } export default QuestionView;