Soy nuevo en React y trato de aprender más creando proyectos. Hice una llamada API para mostrar algunas imágenes en la página y me gustaría crear un botón/icono Me gusta para cada imagen que cambia a rojo cuando se hace clic. Sin embargo, cuando hago clic en un botón, todos los iconos cambian a rojo. Creo que esto puede estar relacionado con la forma en que configuré mi estado, pero parece que no puedo descubrir cómo orientar cada elemento individualmente. Cualquier idea sería muy apreciada.
` //store api data const [eventsData, setEventsData] = useState([]); //state for like button const [isLiked, setIsLiked] = useState(false); useEffect(() => { axios({ url: "https://app.ticketmaster.com/discovery/v2/events", params: { city: userInput, countryCode: "ca", }, }) .then((response) => { setEventsData(response.data._embedded.events); }) .catch((error) => { console.log(error) }); }); //here i've tried to filter and target each item and when i console.log(event) it does render the clicked item, however all the icons change to red at the same time const handleLikeEvent = (id) => { eventsData.filter((event) => { if (event.id === id) { setIsLiked(!isLiked); } }); }; return ( {eventsData.map((event) => { return ( <div key={event.id}> <img src={event.images[0].url} alt={event.name}></img> <FontAwesomeIcon icon={faHeart} className={isLiked ? "redIcon" : "regularIcon"} onClick={() => handleLikeEvent(event.id)} /> </div> ) `Almacenar me gusta como matriz de identificaciones
const [eventsData, setEventsData] = useState([]); const [likes, setLikes] = useState([]); const handleLikeEvent = (id) => { setLikes(likes.concat(id)); }; return ( <> {eventsData.map((event) => { return ( <div key={event.id}> <img src={event.images[0].url} alt={event.name}></img> <FontAwesomeIcon icon={faHeart} className={likes.includes(event.id) ? "redIcon" : "regularIcon"} onClick={() => handleLikeEvent(event.id)} /> </div> ); })} </> );Su problema es con su estado, isLiked es solo un booleano verdadero o falso, no tiene forma de diferenciar entre el botón 1 o el botón 2 y así sucesivamente, por lo que necesita una forma de cambiar la propiedad css para un botón individual, puede encontrar una implementación de este tipo mirando la respuesta de Siva, donde almacena sus identificaciones en una matriz