accordion.tsx

gistfile1.txt

import React from "react";

type AccordionType = {
  children: React.ReactNode[] | React.ReactNode;
};
const Accordion = (props: AccordionType) => {
  return <div className="accordion">{props.children}</div>;
};

//Yay, namespacing!
Accordion.Button = (props: AccordionType) => {
  return <h3 className="accordion__title">{props.children}</h3>;
};

Accordion.Panel = (props: AccordionType) => {
  return <div>{props.children}</div>;
};

Accordion.Trigger = (props: AccordionType) => {
  return <div>{props.children}</div>;
};

//You can give your subcomponents any name that you want, and it is what shows up in the dev tools.
// @ts-ignore
Accordion.Button.displayName = "Accordion.Trigger";
// @ts-ignore
Accordion.Panel.displayName = "Accordion.Panel";

export default Accordion;