Estoy tratando de cambiar un ícono de corazón delineado a un ícono de corazón lleno al hacer clic. Lo tengo funcionando pero todos los corazones de cada carta cambian.
Sé que tengo que probar y usar track.id o algún tipo de identificación, pero no puedo encontrar la manera de hacerlo.
Cualquier ayuda sería muy apreciada.
¡Gracias!
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> ))} )Cambie su onClick para establecer clicked en la identificación
onClick = {()=>setClicked(track.id)}y luego verifique si la identificación coincide con la identificación en la que se hizo clic
{clicked === track.id ? <IonItem lines="none" className="card-icons" key={track.id} onClick={() => setClicked(false) } >