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

Question

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?

score 0 · Answer 1 · answered Feb 21 '22 at 06:45

0

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

or you can use React JS onClick event handler

answered Feb 21 '22 at 06:45

Muhammad Rameez kahlid

1
2

better to write the essential information in the answer than just post links, check [help/answer] for some tips on how to write good answers – Luciano Feb 21 '22 at 09:20

score -1 · Accepted Answer · answered Feb 21 '22 at 06:48

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.

Thanks Paiman. You are a saviour – YASH NIRMAL Feb 21 '22 at 11:09 — YASH NIRMAL, Feb 21 '22 at 11:09
@YASH NIRMAL Your welcome.❤ – Paiman Rasoli Feb 21 '22 at 11:10 — Paiman Rasoli, Feb 21 '22 at 11:10

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

2 Answers2