combining Contexts is React with Typescript-CodePudding

I have a context provider file with the code as below

contexts.tsx

import React from "react";

export const Ordering = React.createContext({
  ordering: false,
});

export const Ordering2 = React.createContext({
  ordering2: true,
});

Since I may have many more contexts, I want to combine/Compose them.

Based on the this question

If I do not use the combiner, I use the context providers as below & it works just fine.

Can you please guide me on what is wrong. Thanks.

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>
    );
}

CodePudding user response：

As you see in your last example: the context objects are not the provider components. They contain them on the .Provider property. Compose wants an array of components, so pass those:

<Compose components={[Ordering.Provider, Ordering2.Provider]}>

I also haven't seen the React.JSXElementConstructor type before, and I'd expect components to be typed as React.ComponentType; but maybe either works.