---
title: "FAQ Accordions — React"
canonical: https://sky-ui.cf.sky.com/sections/faq-accordions/react
apiPackages: [{"name":"@sky-uk/ui-sections","representedVersion":"1.2.4"}]
---

# FAQ Accordions — React

Used for consistent delivery of FAQs

```js
import { FAQs } from '@sky-uk/ui-sections';
```

### Example

The `FAQs` accordions features predefined markdown rendering.

```tsx
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>
    </>
  );
}
```

### Props

Props marked with `?` are optional. Sections or section elements that do not provide the required props will not render.
The `data` prop support key/value pairs that are rendered as kebab case data attributes on the component.

- $animated?: `boolean` defaults to `false`
- body?: `string`
- data?: `object`
- header
  - body?: `string`
  - headline: `string`
  - headlineLevel?: `string` (`h1` | `h2` | `h3`);
  - overline?: `string` | `Image`;
  - textCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - primaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - secondaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
- items: `array`
  - id: `string`
  - body: `string`
  - heading: `string`
  - onOpen?: `() => void`
  - onClose?: `() => void`
- moreCta?: `object`
  - href: `string`
  - text: `string`
  - data?: `object`