Passing state from server component to client chidren component
Unanswered
Chinese Alligator posted this in #help-forum
Chinese AlligatorOP
I added the photo as a reference to visualise this:
- In my app, the page that displays this client component (which is a dropdown of playlists) is a server component because i fetch important data here such as an accessToken.
- After the fetching the data it is passed down as props to populate the options of the dropdown.
- Now i would like to be sent the selected playlist from the client component to the server component and I don't know how. All i need to pass is a string which includes an id of the playlist so that i can fetch the details of the playlist when selected.
I know the title is nonsense but I couldn't find the words to describe this properly rn.
- In my app, the page that displays this client component (which is a dropdown of playlists) is a server component because i fetch important data here such as an accessToken.
- After the fetching the data it is passed down as props to populate the options of the dropdown.
- Now i would like to be sent the selected playlist from the client component to the server component and I don't know how. All i need to pass is a string which includes an id of the playlist so that i can fetch the details of the playlist when selected.
I know the title is nonsense but I couldn't find the words to describe this properly rn.
10 Replies
The easiest way to pass data from client components to server component is using Search Params
Chinese AlligatorOP
good response actually i m trying this tommorow
The title of your thread is the exact opposite though
@Asian black bear https://nextjs-faq.com/sharing-client-side-state-with-server-components
Chinese AlligatorOP
this doesn't work for me it doesnt update the searchParams prop inside the serverside parent, it's undefined when it loads initially because no playlist is selected, but it doesn't cause a new request when a playlist is selected and it stays undefined.
I'm using router.replace onClick I really don't understand why it's not working
I'm using router.replace onClick I really don't understand why it's not working
Asian black bear
Then you have to share a minimal reproduction of the issue with code and remove everything that is irrelevant to the code. In a best case within a code sandbox or similar so that others can help you troubleshoot the problem.
Chinese AlligatorOP
I fixed it, the problem was I was trying to access the searchParams prop inside of a server component instead of the page.
life is great again
Please close your forum post if the issue is resolved.