lundi 21 septembre 2020

How can I share props (two-ways) between two components of the same type with Reactjs?

I'm building a music app using React, and I'm a newbie :)

My goal is to

  • load a JSON playlist (formatted as JSPF)
  • display a Playlist based on this JSON
  • fill a Player's queue with the playlist tracks.

So I'm working on several components : Track, Tracklist, Playlist, and Player.

  • Tracklists have Tracks.
  • Playlist and Player have a Tracklist (and other things) : the Player's queue is a Tracklist component.
  • Player is not a descendant of Playlist, it is aside. For instance, I want to be able to queue (or unqueue) some tracks of the Playlist into the Player.

What I want is to be able to share/sync the props of a (same) Track between the Playlist and the Player :

Let's say that I have a favorited prop for a Track.
I would toggle it by clicking a button nested in the Track component. I need to update the props of both tracks either if I click the button within the Playlist, or within the Player; and vice verca : all props should be "synced".

Can I do this with React and how ?

Thanks a lot for your advices !

Aucun commentaire:

Enregistrer un commentaire