Reactadvanced
Compound components with context instead of Children.map
import { createContext, useContext, useState, type ReactNode } from "react";
type TabsState = { activeTab: string; setActiveTab: (id: string) => void };
const TabsContext = createContext<TabsState | null>(null);
Build a Tabs component whose parts talk through context instead of cloning and inspecting children, so consumers can nest and reorder freely.