Trying to target one single mapped list item and change its Icon in react

Question

I am trying to change an outlined heart icon to a filled heart icon onClick. I have it working but all the hearts on each card change.

I know I have to try and use the track.id or some sort of id but I just cannot figure out how to do it ?

Any help would be greatly appreciated.

Thank you!

const [clicked, setClicked] = useState(false);


return (
   {results.tracks.map(track => (
       
          <IonCard className="IonCard" key={track.id} color=''>
                   <IonItemGroup translucent>

                                {clicked?
                                    <IonItem lines="none"
                                       className="card-icons"
                                       key={track.id}
                                       onClick={() =>
                                         setClicked(false)
                                       }
                                     >
                                         <IonIcon
                                             className="card-icons"
                                             icon={heart}
                                             id="disLikeHeart"
                                             slot="start"
                                             value={track.id}
                                            />
                                <IonLabel>Discovered Music/>
                                        </IonItem>

                                        :

                                    <IonItem lines="none"
                                       className="card-icons"
                                       key={track.id}
                                       onClick={() =>
                                          setClicked(true)
                                        }
                                     >
                                          <IonIcon
                                             className="card-icons"
                                             icon={heartOutline}
                                             id="likeHeart"
                                             slot="start"
                                             value={track.id}
                                            />
                                   <IonLabel>Discovered Music</IonLabel>
                                     </IonItem>
                                    }

                 </>IonItemGroup translucent>
         </IonCard>

   ))}
)

Answer 1

Change your onClick to set clicked to the id

onClick = {()=>setClicked(track.id)}

and then check if the id matches the clicked id

{clicked === track.id ?
   <IonItem lines="none"
     className="card-icons"
     key={track.id}
     onClick={() =>
      setClicked(false)
     }
   >