Tengo un archivo de proveedor de contexto con el siguiente código

contextos.tsx

 import React from "react"; export const Ordering = React.createContext({ ordering: false, }); export const Ordering2 = React.createContext({ ordering2: true, });

Como puedo tener muchos más contextos, quiero combinarlos/componerlos .

Basado en esta pregunta Demasiados proveedores de React Context, el combinador de contexto de código es el siguiente

combinarComponentes.tsx

 import React from "react"; interface Props { components: Array<React.JSXElementConstructor<React.PropsWithChildren<any>>>; children: React.ReactNode; } export const Compose = (props: Props) => { const { components = [], children, ...rest } = props; return ( <> {components.reduceRight((acc, Comp) => { return <Comp {...rest}>{acc}</Comp>; }, children)} </> ); };

Como se menciona en la solución en la pregunta, estoy tratando de usar esto en la aplicación como se muestra a continuación, pero aparece el error como se muestra en la imagen.

Aplicación.tsx

 export const App = () => { return ( <Compose components={[Ordering, Ordering2]}> <div className="app"> <EateryInfo orderStatus={Ordering} /> <MenuButton orderStatus2={Ordering2} /> </div> </Compose> ); }

Si no uso el combinador, uso los proveedores de contexto como se muestra a continuación y funciona bien.

¿Puedes por favor guiarme en lo que está mal? Gracias.

 export const App = () => { const [ordering, setOrdering] = useState(false); const [ordering2, setOrdering2] = useState(false); const handleOrdering = () => { setOrdering((s) => !s); }; const handleOrdering2 = () => { setOrdering2((s) => !s); }; return ( <Ordering.Provider value={{ ordering: ordering }}> <Ordering2.Provider value={{ ordering2: ordering2 }}></Ordering2.Provider> <div className="app"> <EateryInfo orderStatus={Ordering} /> <MenuButton orderStatus2={Ordering2} /> </div> </Ordering.Provider> ); }