React, Components, Children, State

Renders an accordion menu with multiple collapsible content elements.

  • Define an AccordionItem component, that renders a <button>. The button updates the component and notifies its parent via the handleClick callback.
  • Use the isCollapsed prop in AccordionItem to determine its appearance and set its className.
  • Define an Accordion component. Use the useState() hook to initialize the value of the bindIndex state variable to defaultIndex.
  • Filter children to remove unnecessary nodes except for AccordionItem by identifying the function's name.
  • Use on the collected nodes to render the individual collapsible elements.
  • Define changeItem, which will be executed when clicking an AccordionItem's <button>.
  • changeItem executes the passed callback, onItemClick, and updates bindIndex based on the clicked element.
.accordion-item.collapsed {
  display: none;

.accordion-item.expanded {
  display: block;

.accordion-button {
  display: block;
  width: 100%;
const AccordionItem = ({ label, isCollapsed, handleClick, children }) => {
  return (
      <button className="accordion-button" onClick={handleClick}>
        className={`accordion-item ${isCollapsed ? 'collapsed' : 'expanded'}`}

const Accordion = ({ defaultIndex, onItemClick, children }) => {
  const [bindIndex, setBindIndex] = React.useState(defaultIndex);

  const changeItem = itemIndex => {
    if (typeof onItemClick === 'function') onItemClick(itemIndex);
    if (itemIndex !== bindIndex) setBindIndex(itemIndex);
  const items = children.filter(item => === 'AccordionItem');

  return (
      {{ props }) => (
          isCollapsed={bindIndex !== props.index}
          handleClick={() => changeItem(props.index)}
  <Accordion defaultIndex="1" onItemClick={console.log}>
    <AccordionItem label="A" index="1">
      Lorem ipsum
    <AccordionItem label="B" index="2">
      Dolor sit amet

Recommended snippets

  • Collapse

    React, Components

    Renders a component with collapsible content.

  • Tabs

    React, Components

    Renders a tabbed menu and view component.

  • TreeView

    React, Components

    Renders a tree view of a JSON object or array with collapsible content.