Reactjs - Can we create two provider using a single createContext?

Paramjeet
October 11, 2023
162 views
0 votes
2 Answers

I want to use a state to transition from the first provider to the second provider and I have four pages in my React project here I am using a single createContext for two providers. Is this possible?

import { createContext, useState } from "react";

const Usercontext = createContext()

export const UserProvider = ({ children }) => {
    const [username, setUsername] = useState("");
    const [flag, setFlag] = useState(0)
  

    return (
      <Usercontext.Provider value={{ username, setUsername, flag, setFlag}}>
        {children}
      </Usercontext.Provider>
    );
  };
  
  export default Usercontext;

  export const Adminprovider = ({child}) => {
    return (
      <Usercontext.Provider>
          {child}
      </Usercontext.Provider>
    )
  }

Tags: react-context reactjs

Answers

In the below code, I just created everything inside a context, and then I provided data by using one context to both providers. Let me know please if you find any issues in the below code.

import React, { createContext, useState } from "react";

const UserContext = createContext();

export const UserProvider = ({ children }) => {
const [username, setUsername] = useState("");
const [flag, setFlag] = useState(0);

return (
<UserContext.Provider value={{ username, setUsername, flag, setFlag }}>
  {children}
</UserContext.Provider>
);
};

export const AdminProvider = ({ children }) => {
// Add state specific to the AdminProvider if needed
const [adminData, setAdminData] = useState("");

return (
<UserContext.Provider value={{ adminData }}>
  {children}
</UserContext.Provider>
);
};
//TRY THE ABOVE CODE
import React from "react";
import { UserProvider, AdminProvider } from "./your-provider-file-path";

function App() {
return (
<UserProvider>
  <AdminProvider>
    {/* Your other components */}
  </AdminProvider>
</UserProvider>
);
}

export default App;

You have defined two providers using the same Usercontext context.

In the Adminprovider component you should wrap it with a different context for different state management.
If you want to use a state to transition from the first provider to the second provider you should use a different context for the Adminprovider to manage its own state.

import { createContext, useContext, useState } from "react";

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [username, setUsername] = useState("");
  const [flag, setFlag] = useState(0);

  return (
    <UserContext.Provider value={{ username, setUsername, flag, setFlag }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserContext;

export const AdminContext = createContext(); // Create a new context //

export const AdminProvider = ({ children }) => {
  // Manage state specific to the AdminProvider here //
  const [adminState, setAdminState] = useState("");

  return (
    <AdminContext.Provider value={{ adminState, setAdminState }}>
      {children}
    </AdminContext.Provider>
  );
};

Please signup or login to give your own answer.

Click here to cancel reply.

Reactjs – Can we create two provider using a single createContext?

Answers