How Can I Store Child Components in React Context Without Passing Props at the Top Level?

Below is one common approach to how libraries solve this problem. The idea is that the parent component (e.g. TabGroup) sets up a context that holds the shared state (such as the active tab index). Then, the “child” components (like TabButton and TabPanel) get their “position” from either:

1. The parent “mapping” over the children (using functions such as React.Children.toArray and React.cloneElement) and injecting an index or other props, or
2. A “registration” pattern, where the child registers itself with the parent on mount.

Using React.Children.map and cloneElement

One of the simplest patterns is to have the parent component identify its children by iterating over them. For example, in a TabList you can map over its children and pass an index to each TabButton:

JSXCopied
import React, { createContext, useContext, useState } from 'react';

// Create a context that holds the shared state and actions
const TabGroupContext = createContext();

export function TabGroup({ children }) {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <TabGroupContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabGroupContext.Provider>
  );
}

export function TabList({ children }) {
  // Convert children into an array so we can map over them and inject an index.
  const childrenArray = React.Children.toArray(children);

  return (
    <div role="tablist">
      {childrenArray.map((child, index) =>
        React.cloneElement(child, { index })
      )}
    </div>
  );
}

export function TabButton({ index, children }) {
  const { activeTab, setActiveTab } = useContext(TabGroupContext);

  return (
    <button
      role="tab"
      onClick={() => setActiveTab(index)}
      className={activeTab === index ? 'active' : ''}
    >
      {children}
    </button>
  );
}

export function TabPanels({ children }) {
  // Again, convert children to array to access them by index.
  const childrenArray = React.Children.toArray(children);
  const { activeTab } = useContext(TabGroupContext);

  return (
    <div role="tabpanel">
      {childrenArray[activeTab]}
    </div>
  );
}

export function TabPanel({ children }) {
  return <div>{children}</div>;
}

How It Works

• Context for shared state:
  The TabGroup component creates the context that holds the activeTab state and a setter function, which allows any descendant to update the active tab.

• Injecting indices:
  In the TabList component, React.Children.toArray(children) converts the children (the TabButton elements) into an array. Then, React.cloneElement is used to inject an index prop into each child (button). Now, when you click on a TabButton, it calls setActiveTab(index) with its injected index.

• Displaying the correct panel:
  In TabPanels, the same technique is used to collect the panels into an array. Since the order of the buttons matches the order of the panels, the activeTab index directly selects the corresponding panel.

Alternative: The Registration Pattern

Another pattern (less common for simple cases) is to have each child “register” itself with the parent by calling a callback provided in the context when it mounts. For example, in the TabButton component, you might call a registerTab function. The parent then builds an internal list of tabs. This is useful when the order cannot be reliably determined through the component tree itself (for example, if the components might move around). But for most tab-like components, simply iterating over props.children is sufficient and simpler.

Should You Build Your Own or Use a Library?

Building your own components gives you full control and ownership over the code, which is a big advantage if you have specific requirements or want fine-grained control over styling and behavior. However, using a library like Headless UI can save time and reduce the maintenance overhead when your needs are met by those libraries.

In summary, to know which tab was clicked, pass the index to each child during rendering (for example, with React.cloneElement) so that when clicked, a button can update a shared state with its index. Later, the parent or other children (like TabPanels) can then render based on that state.

This pattern is what UI libraries use under the hood to provide that “magic” behavior without you having to maintain explicit state for every child element.