How do I use a dynamic variable in a react function

Question

I am developing a react app with a firebase backend. I loop through firestore collection and display the images from that collection.

const getdata = Object.entries(mydata).map(pair => {
    const key = pair[0]
    const value = pair[1]
    return (
        <div className='image">
        <img src={value} id={key} onclick={showpop} />
        </div>
    )
}

When the image is clicked, it should show a pop up, and I am doing that like so:

function showpop(){
    var img = document.getElementById(//get value of the id here from the key);
    img.onclick = function(){
        //show popup here
    }
}

I have tried with getElementById(key), getElementById(props.key), but they all give me errors.

When I dont add the onclick, I get an error from this line : myImg.src = this.src; saying src is not defined. — Sky Lurk
– Sky Lurk, Commented Jan 17, 2021 at 12:53
you can set the image src on showpop when you bind the onclick={()=>{showpop(value)}}, just like my answer — linchong
– linchong, Commented Jan 17, 2021 at 12:59

lissettdm · Accepted Answer · 2021-01-17 17:52:17Z

1

If you are using Reactjs, then this onclick event should be onClick

const getdata = Object.entries(mydata)
   .map(([key, value])=> (
      <div className='image">
        <img src={value} id={key} onClick={showpop} />
     </div>));

then:

function showpop(event){
   const {id} = event.target; //--> get the img id property
   const src =  event.target.getAttribute("src") //--> get the src attribute
   //--> show popup
}

edited Jan 17, 2021 at 17:52

answered Jan 17, 2021 at 16:07

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

linchong · Accepted Answer · 2021-01-17 11:54:59Z

1

You can get the value when binding the function

<div className='image'>
   <img src={value} id={key} onclick={()=>{showpop(pair)}} />
</div>


function showpop(pair){
   console.log(pair)
}

answered Jan 17, 2021 at 11:54

linchong

5032 silver badges4 bronze badges

Collectives™ on Stack Overflow

How do I use a dynamic variable in a react function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related