How can i highlight the current song that is being played

Question

Here is the code that displays my playlist.

             {data?.map((data, index) => {
                 return(
                  <li 
                  onClick={(e) => {
                    e.preventDefault()
                    setActive(true)
                      store.addSong(data.assets[0].audio)
                      store.addImage(data.photo)
                      store.addName(data.name)
                      store.addSongIndex(index)
                  }}
                  className={!store.song ? "" : "active"}
                  key={data?.id}>
                  <div className="plItem">
                     <span className="trackNumber">{index + 1}</span> 
                     <span className="trackTitle">
                        <WordLimit limit={35}>
                         {data ? data.name : "word"}
                         </WordLimit> 
                      </span> 
                   </div>
                   </li>
                 )
             } 
              )}

So, the onclick function sends the current song to the audio source, updates the image of the song, but i want to highlight the current song that is being played, i want to be able to add probably a dynamic className that works on the songs that is being played on the playlist, in short it is just to differentiate the current played song from the one that is not being played.

I tried adding a className called active dynamically, but instead for it get just a single <li></li> it got all, which is not what i want. Here is how i tried to do it..

className={!store.song ? "" : "active"}

Answer 1

What you can do is, in your className logic, check the current song against the song in the store. If they're equal, that's the highlighted class:

className={store.song === data.song ? "highlight" : undefined}

And here it is in context:

{data?.map((data, index) => {
  return(
    <li 
      onClick={(e) => {
        e.preventDefault()
        setActive(true)
        store.addSong(data.assets[0].audio)
        store.addImage(data.photo)
        store.addName(data.name)
        store.addSongIndex(index)
      }}
      className={store.song === data.song ? "highlight" : undefined}
      key={data?.id}
    >
    <div className="plItem">
      <span className="trackNumber">{index + 1}</span> 
      <span className="trackTitle">
        <WordLimit limit={35}>
          {data ? data.name : "word"}
        </WordLimit> 
      </span> 
    </div>
  </li>
)})}