Estoy mapeando los elementos 'MemeCard.js' dentro de 'Home.js' usando la función 'mapa' de ReactJs.
En Home.js, el mapeo de elementos se hace así
memes = ["url1","url2","url3","url4"]; return ( <div className="container my-3"> <div className="row"> {memes.map((meme, index) => { return ( <div className="col-xl-4 my-5"> <MemeCard imgurl={meme} index={index} /> </div> ); })} </div> </div> );Mi elemento MemeCard es
import React from 'react'; import MemeCSS from './MemeCard.module.css'; import whiteHeart from '../images/bordered_heart.png'; import blueHeart from '../images/blue_heart.png'; import Share from '../images/share.png'; export default function MemeCard(props) { function likeBtnClicked(index){ document.getElementById("heartIMG").setAttribute("src",blueHeart); console.log(index); } return ( <div className={MemeCSS.box}> <img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" /> <div className={MemeCSS.divbutton}> <img className={MemeCSS.shareImg} src={Share} alt="share" /> <img id="heartIMG" className={MemeCSS.likeImg} onClick={()=>{likeBtnClicked(props.index);}} src={whiteHeart} alt="like" /> </div> </div> ); }Lo que quiero hacer es: cambiar la imagen 'likeImage' de la imagen 'whiteHeart' a 'blueHeart' (ambos los he importado), cuando se hace clic en la imagen 'whiteHeart' usando 'onClick'. Pero, no importa en qué imagen 'whiteHeart' de 'MemeCard' haga clic, el código cambia solo la imagen del primer elemento a 'blueHeart'. Porque solo obtiene el "document.getElementById("heartIMG")" del primer elemento cada vez. Pero el índice está imprimiendo el índice del elemento correcto (en el que se hace clic).
Alguien me puede decir como solucionar este problema?
Esto te ayudará... https://upmostly.com/tutorials/react-onclick-event-handling-with-examples
o puede usar el controlador de eventos React JS onClick
Debe agregar una función dinámica que funcione para cada componente individualmente:
// MemeCard.js import React from 'react'; import MemeCSS from './MemeCard.module.css'; import whiteHeart from '../images/bordered_heart.png'; import blueHeart from '../images/blue_heart.png'; import Share from '../images/share.png'; export default function MemeCard(props) { function likeBtnClicked(event){ const element = event.currentTarget; element.setAttribute("src",blueHeart); } return ( <div className={MemeCSS.box}> <img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" /> <div className={MemeCSS.divbutton}> <img className={MemeCSS.shareImg} src={Share} alt="share" /> <img id="heartIMG" className={MemeCSS.likeImg} onClick={likeBtnClicked} src={whiteHeart} alt="like" /> </div> </div> );Ahora todos los componentes tienen su propia función.