React: What are compound components pattern in React?

1import { createContext, useContext, useState } from "react";
2
3// 1. Create context
4const AccordionContext = createContext<{
5  openIndex: number;
6  setOpenIndex: (index: number) => void;
7} | null>(null);
8
9// 2. Parent component manages state
10function Accordion({ children, defaultIndex = 0 }) {
11  const [openIndex, setOpenIndex] = useState(defaultIndex);
12
13  return (
14    <AccordionContext.Provider value={{ openIndex, setOpenIndex }}>
15      <div className="accordion">{children}</div>
16    </AccordionContext.Provider>
17  );
18}
19
20// 3. Child components consume context
21function AccordionItem({ index, children }) {
22  const { openIndex, setOpenIndex } = useContext(AccordionContext)!;
23  const isOpen = openIndex === index;
24
25  return (
26    <div className={`item ${isOpen ? "open" : ""}`}>
27      {children}
28    </div>
29  );
30}
31
32function AccordionHeader({ index, children }) {
33  const { setOpenIndex } = useContext(AccordionContext)!;
34
35  return (
36    <button onClick={() => setOpenIndex(index)}>
37      {children}
38    </button>
39  );
40}
41
42function AccordionPanel({ children }) {
43  return <div className="panel">{children}</div>;
44}
45
46// 4. Usage — flexible composition
47<Accordion>
48  <AccordionItem index={0}>
49    <AccordionHeader index={0}>Section 1</AccordionHeader>
50    <AccordionPanel>Content 1</AccordionPanel>
51  </AccordionItem>
52  <AccordionItem index={1}>
53    <AccordionHeader index={1}>Section 2</AccordionHeader>
54    <AccordionPanel>Content 2</AccordionPanel>
55  </AccordionItem>
56</Accordion>