Sample of a functional components

sample_functionalComponent.tsx

import React from "react";

export type Choices = {
  A: string
  B: string
  C: string
  D: string
}

export type QuestionType =  {
  id: string
  question: string
  answer: string
  choices: Choices
}

const SampleQuestion: React.VFC<QuestionType> = ({id, question, answer, choices}) => {
  return (
    <div>
      <h1>問題{id}</h1>
      <h2>問題文:{question}</h2>
      <ul>
        <li>選択肢A:{choices.A}</li>
        <li>選択肢B:{choices.B}</li>
        <li>選択肢C:{choices.C}</li>
        <li>選択肢D:{choices.D}</li>
      </ul>
      <h2>正解: {answer}</h2>
    </div>
  );
}

export default SampleQuestion;