Как сделать, чтобы одновременно был открыт только один элемент аккордеона?

Question

[Evgeii]

Есть аккордеон. Нужно сделать, чтобы при клике на кнопку раннее открытый элемент закрывался, т.е. одновременно был только один открытый. Как такое реализовать?

Answer 1

[0xD34F]

const AccordionItem = ({ title, opened, toggle, children }) => (
  <div>
    <button onClick={toggle}>{title}</button>
    {opened && children}
  </div>
);

const Accordion = ({ items }) => {
  const [ opened, setOpened ] = useState(null);

  return (
    <div>
      {items.map((n, i) => (
        <AccordionItem
          title={n.title}
          opened={i === opened}
          toggle={setOpened.bind(null, i === opened ? null : i)}
        >
          <p>{n.text}</p>
        </AccordionItem>
      ))}
    </div>
  );
};

Answer 2

[bitwheeze]

Ну если у каждого элемента аккардиона есть свой уникальный id, то в стейте храните id открытого элемента. А в каждом элементе что то вроде такого делайте

const [openId, setOpenId] = useState();
return (<>{elems.map(el => <AccElement key={el.id} open={opendId===el.id} onClick={() => setOpenId(el.id)} data={el} />}</>);