Skip to content

Instantly share code, notes, and snippets.

@muyiwaoyeniyi
Created March 11, 2026 15:47
Show Gist options
  • Select an option

  • Save muyiwaoyeniyi/8da8b9b18aa531180a901ea75f9b6d77 to your computer and use it in GitHub Desktop.

Select an option

Save muyiwaoyeniyi/8da8b9b18aa531180a901ea75f9b6d77 to your computer and use it in GitHub Desktop.
import React, { useState, useEffect, Fragment } from "react";
const Images = images => {
const imageLinks = images.map(({ link }) => link);
const [imageClickCount, setImageClickCount] = useState({});
const buildImageClickCount = () => {
const obj = {};
images.forEach(({ link }) => {
obj[link] = imageClickCount[link] || 0;
});
return obj;
};
useEffect(() => {
setImageClickCount(buildImageClickCount());
});
const onImageClick = link => {
imageClickCount[link] = imageClickCount[link] + 1;
};
return (
<div>
{imageLinks.map(link => (
<>
<img src={link} onClick={onImageClick} />
{imageClickCount[link] && (
<span>{`clicked ${imageClickCount[link]} times`}</span>
)}
</>
))}
</div>
);
};
export default Images;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment