Set an onClick listener on an Image in React

# Set an onClick listener on an Image in React

To set an onClick listener on an image in React:

Set the onClick prop on the image element.
The function you pass to the prop will get called every time the image is clicked.

App.js

Copied!
const App = () => {
  const handleClick = event => {
    // 👇️ Refers to the image element
    console.log(event.target);

    console.log('Image clicked');
  };

  return (
    <div>
      <img
        src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
        alt="car"
        onClick={handleClick}
      />
    </div>
  );
};

export default App;

react onclick image

The code for this article is available on GitHub

We set the onClick prop on the image element, so every time the element is clicked, the handleClick function gets invoked.

App.js

Copied!
<img
  src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
  alt="car"
  onClick={handleClick}
/>

If you need to access the image element in your handleClick function, access the target property on the event object.

App.js

Copied!
const handleClick = event => {
  // 👇️ Refers to the image element
  console.log(event.target);

  console.log('Image clicked');
};

If the event is not being triggered, make sure your image element doesn't have the CSS property pointer-events set to none.

# Passing a parameter to the `handleClick` function

If you want to pass a parameter to the handleClick function, set the onClick prop to an inline arrow function.

App.js

Copied!
const App = () => {
  const handleClick = (event, message) => {
    // 👇️ Refers to the image element
    console.log(event.target);

    console.log(message);

    console.log('Image clicked');
  };

  return (
    <div>
      <img
        src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
        alt="car"
        onClick={(event) => handleClick(event, 'hello')}
      />
    </div>
  );
};

export default App;

react image onclick with parameter

The code for this article is available on GitHub

Notice that we are passing a function to the onClick prop and not the result of calling one.

App.js

Copied!
<img
  src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
  alt="car"
  onClick={(event) => handleClick(event, 'hello')}
/>

If you invoke the function when passing it to the onClick prop, e.g. onClick={handleClick()}, it would get immediately called when the component mounts.

# Set an onClick listener on a Local Image in React

You can use the same approach to set the onClick prop on a local image.

App.js

Copied!
import MyImage from './thumbnail.webp';

const App = () => {
  const handleClick = event => {
    // 👇️ Refers to the image element
    console.log(event.target);

    console.log('bobbyhadz.com');
  };

  return (
    <div>
      <img src={MyImage} alt="horse" onClick={handleClick} />
    </div>
  );
};

export default App;

set onclick listener on local image in react

The code for this article is available on GitHub

The example assumes that you have an image named thumbnail.webp in the same folder as the App component.

Make sure to specify the correct path to the image file (including the extension).

For example, if you are importing an image from one directory up, you would import as import MyImage from '../thumbnail.webp'.

The image has to be located in the src directory of your project.

Notice that in both examples we set the src prop on the img tag in order to render the image.

App.js

Copied!
<img src={MyImage} alt="horse" onClick={handleClick} />

With images from an external URL, you set the src prop of the image to the complete URL.

With local images, you set the src proper of the img tag to the imported image.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set an onClick listener on an Image in React