component-library-react/components/AccordionItem.jsx

A library of ready to use components for React

import { useState } from "react";

export default function AccordionItem({
  name = "accordionItem",
  HeadSection = () => <p>Hello!</p>,
  MainSection = () => <p>This is the main text!</p>,
  handleClick = () => {},
}) {
  const [open, setOpen] = useState(false);

  return (
    <div id={name} onClick={() => handleClick([open, setOpen])}>
      <HeadSection />
      {open ? <MainSection /> : null}
    </div>
  );
}