Daniel Kempner

ALT import { Children, ReactNode } from "react"; import flattenNodes from "react-keyed-flatten-children"; interface ChildProps { color: "blue" | "red"; } interface PrivateChildProps extends ChildProps { index: number; } const Child = (_props: ChildProps) => { throw new Error("Child must be in Parent"); }; const PrivateChild = ({ color, index }: PrivateChildProps) => ( <li style={{ color }}>{index === 0 ? "First child" : "Not first child"}</li> ); const Parent = ({ children }: { children: ReactNode }) => ( <ul> {Children.map(flattenNodes(children), (child, index) => { if (typeof child === "object" && child.type === Child) { return <PrivateChild {...(child.props as ChildProps)} index={index} />; } })} </ul> ); export const App = () => ( <Parent> <Child color="red" /> <Child color="blue" /> <Child color="red" /> <Child color="blue" /> </Parent> );