Skip to main content

State changing event

The onStateChange event of Accordion can be used to listen to item state updates. The event object has a key prop identifying which item's state has changed.

import { Accordion, AccordionItem } from '@szhsin/react-accordion';

const items = [
  {
    header: 'What is Lorem Ipsum?',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing...'
  },
  {
    header: 'Where does it come from?',
    content: 'Quisque eget luctus mi, vehicula mollis lorem...'
  },
  {
    header: 'Why do we use it?',
    content: 'Suspendisse massa risus, pretium id interdum in...'
  }
];

/* eslint-disable no-console */

export default function Example() {
  return (
    <Accordion
      onStateChange={({ key, current }) => {
        if (current.isResolved)
          console.log(
            `${key as string} is expanded: ${current.isEnter}`
          );
      }}
    >
      {items.map(({ header, content }, i) => (
        <AccordionItem
          key={i}
          header={header}
          // Explicitly set `itemKey` prop for each item
          itemKey={`Item-${i + 1}`}
        >
          {content}
        </AccordionItem>
      ))}
    </Accordion>
  );
}
tip

Open the browser console to see the logs.