FAQ Accordions - React

function Example() {
  const [state, setState] = React.useState(null);

  const content = {
    data: {
      testId: 'testId',
      contentId: 'contentId'
    },
    items: [
      {
        id: 'faq-feature-1',
        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie lectus magna, eu ultrices leo elementum vel. Fusce iaculis enim vel ligula viverra, ac finibus metus convallis. Pellentesque at viverra libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.',
        heading: 'FAQ Title 1',
        onOpen: () => handleOpen(0),
        onClose: () => handleClose(0)
      },
      {
        id: 'faq-feature-1',
        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie lectus magna, eu ultrices leo elementum vel. Fusce iaculis enim vel ligula viverra, ac finibus metus convallis. Pellentesque at viverra libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.',
        heading: 'FAQ Title 2',
        onOpen: () => handleOpen(1),
        onClose: () => handleClose(1)
      }
    ],
    header: {
      headline: 'Sky Cinema FAQs',
    },
    moreCta: {
      href: 'http://sky.com',
      text: 'More FAQs',
      target: '_blank',
      data: {
        testId: 'moreTestId',
        trackingLabel: 'moreTrackingLabel'
      },
    }
  }

  const handleOpen = idx => {
    setState(`FAQ ${idx} just opened`);
  }

  const handleClose = idx => {
    setState(`FAQ ${idx} just closed`);
  }

  return (
    <>
      <FAQs {...content} />
      <Text>{state}</Text>
    </>
  );
}