Best way to save data through several pages
Unanswered
Minskin posted this in #help-forum
MinskinOP
I want to create a site where I go through three pages to choose from certain options on each page and then to save the choices to display at the last page. I first tried to simply add the choice as a query when Linking to the next page, but that adds the query in the URL, which I'd rather avoid.
I also considered using useState at the beginning to pass the "set" method between pages as I saw in a different tutorial, but that tutorial uses React and Routers to pass the methods, so I don't know that that fits.
I hope I explained this well. Is there a good way to do this that makes sense in Next?
I also considered using useState at the beginning to pass the "set" method between pages as I saw in a different tutorial, but that tutorial uses React and Routers to pass the methods, so I don't know that that fits.
I hope I explained this well. Is there a good way to do this that makes sense in Next?
11 Replies
You don’t really want to pass state through the URL for this. Easiest way in Next is to use some kind of shared state, either React context or a store like Zustand. Wrap your app in a provider, save the user’s choices there, and then just read them on the last page. That way you don’t have to worry about query strings or props drilling. If you need persistence across refreshes, you can stick it in localStorage or even a session, but for a simple 3-step flow, context works fine.
@hojomojo You don’t really want to pass state through the URL for this. Easiest way in Next is to use some kind of shared state, either React context or a store like Zustand. Wrap your app in a provider, save the user’s choices there, and then just read them on the last page. That way you don’t have to worry about query strings or props drilling. If you need persistence across refreshes, you can stick it in localStorage or even a session, but for a simple 3-step flow, context works fine.
MinskinOP
Do you know of a good guide for using React context the way you're suggesting?
Yeah, the official React docs on Context are a good starting point. Traversy Media also has a nice crash course on YouTube if you prefer a walkthrough with examples.
Just to add to what hojomo said: in App Router, mount your context/store in a shared layout (eg.
app/wizard/layout.tsx with use client). If you only put it in a page, it resets on navigationMinskinOP
Thanks for the help so far. I'm trying to work with contexts but my reducer methods don't seem to be passed into my GlobalContext when I use
But when I do
useContext to get them. I'm returning this from GlobalState.js:<GlobalContext.Provider value={{
journey: state,
addCountry,
addActivity,
addGuide
}}>
{children}
</GlobalContext.Provider>But when I do
useContext(GlobalContext) it only returns journey and not the methods. I don't know what I'm doing wrong here, I mostly adapted it from Traversy's repo https://github.com/bradtraversy/expense-tracker-react/blob/masterSounds like your action functions aren’t actually defined or bound where you’re passing them to the provider. Double check you didn’t create two different contexts by accident and console.log them before the provider if they’re undefined there, they won’t show up in useContext either.
MinskinOP
Not undefined and I only used createContext once, should be right
MinskinOP
to be clear it should include the three methods above.
Sloth bear
Im not answering to the question but do you know about Zustand ? Its quite used and very simple when you get it, and a very lite package.
light
@Sloth bear Im not answering to the question but do you know about Zustand ? Its quite used and very simple when you get it, and a very lite package.
MinskinOP
I don't know very much about it no