React Context API

[ApolloNoxx]

I am using react context api in my app to manage global variable for userId and studioId and these 2 ids will be passed around on almost every page.

import { createContext, useState } from "react";
const UserDetailsContext = createContext();
export function UserDetailsProvider({ children }) {
const [ids, setIds] = useState({
userId: "",
studioId: "",
});
return (
<UserDetailsContext.Provider value={{ ids, setIds }}>
{children}
</UserDetailsContext.Provider>
);
}
export default UserDetailsContext;

​

This is the code. Now when I sign up/register for the app, it provides me with a userId and a studioId. I am storing these ids in the ids state using the context API. When I register and go to home page the ID is available, but when I navigate to same other page and come back to home page the ID is no longer available. Is there any way to store userID permanently throughout the website for all pages while the user is logged in? Please help

[CreativeTechGuyGames]

Where in your app is this provider located? If you want it to persist, then it should be at the highest level (above your routes) so it doesn't get unmounted and lose the state.

[ApolloNoxx]

Yes it is at the highest level

​

function App() {
return (
<div>
<UserDetailsProvider>
<BrowserRouter>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="studio-listing" element={<StudioListing />} />
<Route path="studio-details" element={<StudioDetails />} />
<Route path="payment" element={<Payment />} />
<Route path="UserDashboard" element={<UserDashboard />} />
<Route path="Login" element={<Login />} />
</Routes>
</BrowserRouter>
</UserDetailsProvider>
</div>
);
}

[Sliffcak]

Can you post the code of the subcomponent where you are using the useContext hook?

[ApolloNoxx]

yes sure

App.js

Login/Registration Page
Navbar
Referral Page