ballistic-builder/app/components/Info/Faq/index.tsx

import React, { Component } from 'react';
import styles from './styles.module.css'
import { useQuery, useMutation, gql } from "@apollo/client";

export default function Faq(props) {

  const GET_SITE_CONTENT_FAQ = gql`
  query Get_Site_Content_Faq {
    site_contents(where: {content_id: {_eq: "FAQ"}}, order_by: {content: asc}) {
      id
      content_id
      content
    }
   }
 `;

  const { loading, error, data } = useQuery(GET_SITE_CONTENT_FAQ);
  if(loading) return "Loading ...";
  if(error) return `Error! ${error.message}` ;
  
  return (

    <div className="faq container">
      {props.children} 
      <h3>Frequently Asked Questions</h3>
      <div>
        {data.site_contents.map((site_content: { content: any; }) => (
          <span dangerouslySetInnerHTML={{__html: site_content.content}}/>
        ))}

      </div>
    </div>
  )
}