recover data from an onClick() for an image tag

Question

Hi I have an array of cat images which I recovered from Giphy api.

What I want to do is click on the image and console.log the url associated with the image.

The below code is what I tried.

All that happen as soon as I hit the search button console.log showed 25 undefined items.

So I think i'm passing information wrong, and it's detecting onCLick outside of the div

import React from "react";

function handleClick(props) {
  console.log(props.gif);
}

const UserItem = props => {
  return (
    <div className="column">
      <img
        onClick={handleClick(props.gif)}
        alt=""
        src={props.gif}
        className="ui image"
      />
    </div>
  );
};

export default UserItem;

`onClick={() => handleClick(props.gif)}` – Omer Aug 18 '19 at 08:09 — Omer, Aug 18 '19 at 08:09

score 2 · Accepted Answer · answered Aug 18 '19 at 08:07

2

You have a minor mistake, pay attention that onClick prop accepts a "pointer" to a function, in your code, you are invoking handleClick and it returns undefined, therefore, your code is not working.

You can change your handler to get the clicked element src attribute by accessing the click event.

import React from "react";

function handleClick(event) {
  console.log(event.target.src);
}

const UserItem = props => {
  return (
    <div className="column">
      <img
        onClick={handleClick}
        alt=""
        src={props.gif}
        className="ui image"
      />
    </div>
  );
};

export default UserItem;

answered Aug 18 '19 at 08:07

felixmosh

32,615
9
69
88

I literally just found this answer 30 seconds ago here – Jay Aug 18 '19 at 08:08
https://stackoverflow.com/questions/53498281/react-read-value-of-button-clicked?noredirect=1&lq=1 – Jay Aug 18 '19 at 08:09
1

Thanks for the help you beat me to it – Jay Aug 18 '19 at 08:09

recover data from an onClick() for an image tag

Hi I have an array of cat images which I recovered from Giphy api.

What I want to do is click on the image and console.log the url associated with the image.

1 Answers1