how to get the clicked element when clicked in ReactJS when using map?-CodePudding

I am mapping 'MemeCard.js' elements inside the 'Home.js' using ReactJs 'map' function.

In Home.js element mapping is done like this

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>
   );

My MemeCard element is

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>
  );
}

What I want to do is : Change the 'likeImage' from 'whiteHeart' image to 'blueHeart' (both of which I have imported), when clicked on the 'whiteHeart' image using the 'onClick'. But, no matter which 'MemeCard's 'whiteHeart' image I click, the code is changing only the image of the first item to 'blueHeart'. Because it is getting only the "document.getElementById("heartIMG")" of the first item everytime. But the index is printing the index of the correct item(which is clicked).

Can someone tell me how to solve this problem?

CodePudding user response：

Yous should add a dyanmic function which works for each component indvidually.:

// 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>
 );

Now all components has there own function.

CodePudding user response：

This will help you ... https://upmostly.com/tutorials/react-onclick-event-handling-with-examples

or you can use React JS onClick event handler