Compound Components Pattern

Snippet

Compound Components Pattern

The Compound Components pattern allows a parent component to share state implicitly with its children using Context. This makes the API more flexible and cleaner for the consumer, as they don't have to pass props to every child manually.

snippet.js
javascript
const TabsContext = React.createContext();
 
function Tabs({ children }) {
  const [active, setActive] = React.useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
}
 
Tabs.Tab = ({ index, children }) => {
  const { active, setActive } = React.useContext(TabsContext);
  return (
    <button 
      onClick={() => setActive(index)}
      style={{ fontWeight: active === index ? 'bold' : 'normal' }}
    >
      {children}
    </button>
  );
};

react

Breakdown

const TabsContext = React.createContext();

Creates a context object to hold the shared state between parent and child components.

Tabs.Tab = ({ index, children }) => { ... }

Attaches the sub-component directly to the main component object for better organization.

const { active, setActive } = React.useContext(TabsContext);

Consumes the shared state from the parent without prop drilling.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Compound Components Pattern

Related