CODEWITHSUNDEEP
reactjs
Muzaffer
Muzaffer

Reputation: 137

How to wrap multiple context provider with routers in Reactjs

I am trying to add multiple provider to my app. But it does not work. The app in here https://codesandbox.io/s/multiple-providers-ohpcl?file=/src/App.js Thanks.

Upvotes: 1

Views: 955

Answers (2)

Anand Raj
Anand Raj

Reputation: 443

The HomeProvider and AboutProvider components are not rendering their child components.

In react, every component receives a special property named children.

Please refer https://codeburst.io/a-quick-intro-to-reacts-props-children-cb3d2fce4891

In your code, add {props.children} to render child components like

//A parameter is required to access the children special property
const HomeProvider = (props) => {
  return (
    <HomeContext.Provider
      value={{ value: "This is home page" }}
    >
        {props.children}
    </HomeContext.Provider>
  );
};

Upvotes: 0

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

You're not using the children, the nested JSX is sent along with the props as children property. In the provider components just add the received children in the returned JSX.

const AboutProvider = (props) => {
  return (
    <AboutContext.Provider
      value={{ value: "welcome to about page" }}
    >{props.children}</AboutContext.Provider>
  );
};

const HomeContext = createContext();
const HomeProvider = (props) => {
  return (
    <HomeContext.Provider
      value={{ value: "This is home page" }}
    >{props.children}</HomeContext.Provider>
  );
};

Upvotes: 1

Related Questions