Accessing a component's state from a different page (app router)
In my Home() component in app/page (see attached file tree image) I am returning a component called ImageUpload which has state that I would like to access from app/chat/page. Here is what I tried:
Lift up state to app/layout
Since this layout page is the RootLayout and renders everything underneath it as children I don't know how I would pass state down to app/chat/page once I got it up there. (Assuming I understood correctly that all of my pages in subfolders of /app are children of app/layout.
createContext / useContext
When creating context and using context, as soon as I attempt wrapping children in app/layout with a context provider I get:
Error: Could not find the module "/../src/app/_components/image-upload.tsx#ResponseContext#Provider" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
Regardless, not sure I would know how to provide the state from within ImageUpload to the value prop in the ResponseContext.Provider in app/layout.
I am a beginner and probably a bit all over the place. I didn't go on to try using an external state management library because I would like to get my fundamentals right and know if I even need it in the first place. If anyone can point me in the right direction that would be great!
Solution:Jump to solution
Ok, so pages reference different URL routes, so if you're moving outside of page you can't just pass props like you would with reactRouter.
If you want to use context at the root level, you will have to wrap your context provider in a client component then wrap the children inside the layout of that client wrapper.
Try to think, is this a component that runs exclusively on the server or both? if the server you don't have any access to client side react state management, and you're limited as to what you can pass client components, ie cant pass a callback to a client function from a server function....
4 Replies
Solution
Ok, so pages reference different URL routes, so if you're moving outside of page you can't just pass props like you would with reactRouter.
If you want to use context at the root level, you will have to wrap your context provider in a client component then wrap the children inside the layout of that client wrapper.
Try to think, is this a component that runs exclusively on the server or both? if the server you don't have any access to client side react state management, and you're limited as to what you can pass client components, ie cant pass a callback to a client function from a server function.
I mean this in the nicest way possible but if you're an absolute beginner you should really read the docs, and some other resources on RSC and SSR before jumping and asking questions on a discord, and I say that as someone whose asked a lot of stupid questions on discord
Hey, no hard feelings, part of being a "🍼 Noob" (as the tag that I included in my question) is that there are a lot of unknown unknowns, so it's hard to have the self awareness of how much docs reading / video watching / research in general is enough before I've hit diminishing returns and it is worth reaching out for help. In this case I had indeed spent several hours reading and going through several video tutorials so it personally felt like I had reached that point. Thank you for the answer you provided despite believing I hadn't done enough research on my own 👍
Now with regards to the issue I was having 😁 : I played around with this example for sometime https://github.com/vercel/examples/tree/main/app-directory/share-state and it all clicked and makes a lot of sense now (aligning with your answer)
GitHub
examples/app-directory/share-state at main · vercel/examples
Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications. - vercel/examples