React: useState for every div created by .map

I start with react this week and now I have this problem… I created ~20 divs with .map, Now I wanna show something inside div.. based on mouse over event on specific div. I tried useState , but problem is mouseOver event set true/false value for every div from .map.

Is something what I can do to specific on what exact div I wanna use useState?

Thank you.

  const [info, setInfo] = useState(false);

      <div className="list">
        {data.data.collection_collection[0].entities.map((video) => (
          <div
            onMouseEnter={() => setInfo(true)}
            onMouseLeave={() => setInfo(false)}
            className="videoImg"
            key={video.id}
          >
            <img src={video.images[0].url} alt={video.title} />
            {info ? <p>{video.description}</p> : <p>Hi</p>}
          </div>
        ))}
      </div>

Whole code for "that" guy..

import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import fetchEvents from "./fetchEvents";

const List = () => {
  const { data, isLoading } = useQuery(["fetch"], fetchEvents);
  const [info, setInfo] = useState(false);

  if (isLoading) return "Loading...";

  return (
    <>
      <div className="info">
        <h2>{data.data.title}</h2>
        <h3>{data.data.description}</h3>
      </div>

      <div className="list">
        {data.data.collection_collection[0].entities.map((video) => (
          <div
            onMouseEnter={() => setInfo(true)}
            onMouseLeave={() => setInfo(false)}
            className="videoImg"
            key={video.id}
          >
            <img src={video.images[0].url} alt={video.title} />
            {info ? <p>{video.description}</p> : <p>Hi</p>}
          </div>
        ))}
      </div>
    </>
  );
};

Everything……………………………

>Solution :

Right now your useState is being shared to all these divs. So instead of mapping those into divs you map it to a component that have it’s own useState and onmouseover. This is called extracting to a component.

Whenever you have something that is repeated and have it’s own state than you should probably be extracting.
So this div that is repeated 20 times should be a component by itself. Than you would have a useState in this new created component that would have the onmouseover event on it. That would only trigger this instance.