Skip to main content

Item render prop

Both the header and children props of AccordionItem component support the render prop pattern, which can be used to access item state, along with a toggle function to open or close the current item.

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

export default function Example() {
return (
<Accordion>
<AccordionItem
// Accessing item state by giving a function to the `header` prop
header={({ state }) => `Item expanded: ${state.isEnter}`}
>
{({ toggle }) => (
<>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>

{/* `toggle` function is also available from the render prop */}
<button className="btn" onClick={() => toggle(false)}>
Close item
</button>
</>
)}
</AccordionItem>

<AccordionItem header="Where does it come from?">
Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla
vel erat quis sodales. Nam ex enim, eleifend venenatis lectus
vitae, accumsan auctor mi.
</AccordionItem>
</Accordion>
);
}
tip

While this technique is useful for rendering dynamic content based on item state, in most cases you won't need it for styling purpose. The className prop itself accepts a render prop form which can be used to apply class selectors based on state. Please see the styling docs.