React Js Show different images for each list item onhover

<!DOCTYPE html>
<html>

</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

function App() {
      const [hoveredImage, setHoveredImage] = useState(null);

const handleMouseEnter = (imageSrc) => {
        setHoveredImage(imageSrc);
      };

const handleMouseLeave = () => {
        setHoveredImage(null);
      };

const links = [
        {
          text: 'Link 1',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg'
        },
        {
          text: 'Link 2',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne20464172895.png'
        },
         {
          text: 'Link 3',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne1586776004.png'
        },
         {
          text: 'Link 4',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne10272423583.png'
        },
        // Add more links and image sources as needed
      ];

return (
        <div className="container">
          <h3>React Js Show different images for each list item onhover</h3>
          {links.map((link, index) => (
            <a
              key={index}
              target="_blank"
              href={link.imageSrc}
              onMouseEnter={() => handleMouseEnter(link.imageSrc)}
              onMouseLeave={handleMouseLeave}
            >
              {link.text}
            </a>
          ))}
          {hoveredImage && (
            <div className="image-container">
              <img src={hoveredImage} alt="Image on hover" />
            </div>
          )}
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    /* Container */
    .container {
      font-family: Arial, sans-serif;
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/* Link styles */
    .container a {
      display: block;
      margin-bottom: 10px;
      transition: color 0.3s ease-in-out;
    }

.container a:hover {
      color: #007bff;
      /* Change the color on hover */
    }

/* Image container */
    .image-container {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
      z-index: 1;
    }

.container:hover .image-container {
      opacity: 1;
      visibility: visible;
    }

/* Image styles */
    .image-container img {
      max-width: 300px;
      /* Adjust the image width as needed */
      border: 2px solid #007bff;
      /* Add a border around the image */
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      /* Add a subtle shadow */
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
​
</head>
​
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;
​
    function App() {
      const [hoveredImage, setHoveredImage] = useState(null);
​
      const handleMouseEnter = (imageSrc) => {
        setHoveredImage(imageSrc);
      };
​
      const handleMouseLeave = () => {
        setHoveredImage(null);
      };
​
      const links = [
        {
          text: 'Link 1',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg'
        },
        {
          text: 'Link 2',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne20464172895.png'
        },
         {
          text: 'Link 3',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne1586776004.png'
        },
         {
          text: 'Link 4',
          imageSrc: 'https://www.sarkarinaukriexams.com/images/import/sne10272423583.png'
        },
        // Add more links and image sources as needed
      ];
​
      return (
        <div className="container">
          <h3>React Js Show different images for each list item onhover</h3>
          {links.map((link, index) => (
            <a
              key={index}
              target="_blank"
              href={link.imageSrc}
              onMouseEnter={() => handleMouseEnter(link.imageSrc)}
              onMouseLeave={handleMouseLeave}
            >
              {link.text}
            </a>
          ))}
          {hoveredImage && (
            <div className="image-container">
              <img src={hoveredImage} alt="Image on hover" />
            </div>
          )}
        </div>
      );
    }
​
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    /* Container */
    .container {
      font-family: Arial, sans-serif;
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
​
    /* Link styles */
    .container a {
      display: block;
      margin-bottom: 10px;
      transition: color 0.3s ease-in-out;
    }
​
    .container a:hover {
      color: #007bff;
      /* Change the color on hover */
    }
​
    /* Image container */
    .image-container {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
      z-index: 1;
    }
​
    .container:hover .image-container {
      opacity: 1;
      visibility: visible;
    }
​
    /* Image styles */
    .image-container img {
      max-width: 300px;
      /* Adjust the image width as needed */
      border: 2px solid #007bff;
      /* Add a border around the image */
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      /* Add a subtle shadow */
    }
  </style>
</body>
​
</html>