FAQ.tsx

import React, { useState } from 'react'
import GenericExpansionPanel from 'components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel'
import FAQJSon from 'db/FAQ.json'

const formatDetails = (details: Array<string>) => {
  const formatedDetails: React.ReactNode[] = []
  details.forEach((detail, index) => {
    formatedDetails.push(
      <div key={index} className="faq-content-detail">
        {`${detail}`}
      </div>
    )
  })
  return formatedDetails
}

const FAQ = () => {
  const [expandedPanel, setExpandedPanel] = useState<string | false>(false)

  const handleChange = (panel: string) => (
    event: React.ChangeEvent<{}>,
    isExpanded: boolean
  ) => {
    setExpandedPanel(isExpanded ? panel : false)
  }

  return (
    <div className="faq-view-root">
      <div className="faq-view-content">
        {FAQJSon.map((question, index) => {
          return (
            <GenericExpansionPanel
              key={index}
              summary={question.summary}
              details={formatDetails(question.details)}
              expanded={expandedPanel === `panel${index}`}
              onChange={handleChange(`panel${index}`)}
            />
          )
        })}
      </div>
    </div>
  )
}

export default FAQ