Question 300408 in Html Question posted in
Some basic documentation can be found here.

Html – How to send data from one component to another and have it update

My app is a clone of Spotify. I am trying to get it to when the user clicks on a song, it plays on the music player. The song_id stored in a component called SongRow (its in a table). When the user clicks on a SongRow component, it is supposed to send the song_id to the MusicControl (the player) component and update the current song. It updates it, but where I can’t set the state using hooks I can’t have the value dynamically change on the site.

Here is a stripped down pseudocode version.

File1.tsx

// Stored in a table inside a playlist page. Cannot be inside MusicControl
<SongRow onClick={() => setSong("Bloody Stream")}/>

File2.tsx

var songID = "";

setSong(id)
{
    songID = id;
}

function MusicControl()
{
    return (<>
        {songID}
        ... html code
    </>);    
}

I’ve tried using useState and useEffect hooks to have it update it dynamically. Even tried making Music control a class based component and making a singleton so I could change the state anywhere.

Tags:

2

Answers


  1. 0

    if the SongRow is inside the MusicControl component, you can directly pass the setSong in the prop:

    MusicControl: 
[song, setSong] = useState();


return (
   <SongRow setSong=setSong>
)

    if they are siblings, you can put the state in the parent component, and send setSong to SongRow and song to MusicControl

    Login or Signup to reply.
  2. 0

    Use Redux, It provides a global state that can be accessed and modified from any component in your application.
    Components can dispatch actions to update the global state, and other components can subscribe to changes in the state.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search