codee.jsx

import React, { useState, useEffect, Fragment } from "react";

const Images = images => {
  if (images === undefined) return <div>Loading</div>;

  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;