faq-example.ts

type Question = {
  question: string,
  answer: string
}

type FAQSection = {
  title: string,
  items: Question[]
}

const FAQ: FAQSection[] = [
  {
    title: 'Seputar Covid',
    items: [
      {
        question: 'Siapa nama kamu?,
        answer: 'Sebuah Nama',
      },
      {
        question: 'Kapan kamu dilahirkan?,
        answer: 'Misalnya ini adalah sebuah tanggal',
      },
      
      //...restOfQuestions
    ]
  },
  //...restOfSections
]

const QuestionItem = (item: Question) => {
  return (
    <div>
      <h2>{item?.question}</h2>
      <p>{item?.answer}</p>
    </div>
  )
}

const FAQSection = (title: string, items: Question[]) => {
  return (
    <section>
      <h1>{ title }</h1>
      <div>
        {
          items?.length > 0 &&
          items.map((item) => {
            return <QuestionItem item={item} />
          })
        }
      </div>
    </section>
  )
}

FAQ.map((section,idx) => {
  return (
    <FAQSection
      title={section.title}
      items={section.items}
    />
  )
})