#How to pass state between and client and server components?

8 messages · Page 1 of 1 (latest)

torpid night
#

I am building a music player for learning. I need help with state management in Next.js 14 attached component tree.

Question: The play-button.tsx is a client component inside the track-item.tsx server component. I cannot pass the handleClick function to play-button from Page.tsx, which is a server component. How can I achieve this?

When a track is played, I want to add a border to this item and remove the border from the previously playing track. Since the entire list is generated on the server, I'm not sure how to remove borders from other items. Maybe I can achieve this if the app state is accessible in track-item.tsx.

I am new to web development and reading about Zustand. Any suggestions on what store I need? Should I wrap the whole app in some type of context provider?

Screenshot_2024-08-14_at_5.51.56_PM.png
dense pondBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

sharp pebble
#

Just make the entire thing a client component 😂

#

When it starts pushing back, just let it go.

#

That would be my professional suggestion.

tranquil cave
#

React Query will set you free

torpid night
#

yep, I made the page component client and using tanstack query for making api calls. Used zustand to pull currentTrack, IsPlaying and other states in to child components. So far its working. I may refactor it later since I need mini player client component on all pages. Also,I don't want to make root layout client. problem for another day. Thanks for the suggestion,

#

Here is something else to explore : I can store currently playing track and isplaying in url state as well.