如何在鼠标进入/离开事件中呈现React.Component

Question

Have a problem with rendering react component on onMouseEnter , onMouseLeave events in the list of items

I have a list of items

const [isHover, setHover] = useState(false)
...
{data.categories.map((item) => (
  <>
    <li
      key={item.id}
      className="list-item"
      onMouseEnter={() => {
        setHover(true);
      }}
      onMouseLeave={() => {
        setHover(false);
      }}
    >
      <NavLink
        to={`/catalogues/${item.name_parameterized}`}
        className="list-item-link"
        activeClassName="active"
      >
        {item.name}
      </NavLink>
    </li>
    {isHover && <SubCategory data={item.children} />}
  </>
))}

Need to show SubCategory Component with different data on the onMouseLeave / onMouseEnter events on the every li
If i do something like this

<ul>
<li>
...
isHover && <SubCategory>
<li>
<ul>

I see that <SubCategory> shown items.length times but I need to show only one <SubCategory> for hovering li only

Expected result is how on the Walmart site subcategories shown

Answer 1

In other words you need a different state for each element, therefore you also need a Component for each:

function ShowOnHover({ item }) {
  const [isHover, setHover] = useState(false);

  return (
   <>
     <li
      key={item.id}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
     >
     <NavLink
      to={`/catalogues/${item.name_parameterized}`}
      className="list-item-link"
      activeClassName="active"
     >
      {item.name}
     </NavLink>
    </li>
    {isHover && <SubCategory data={item.children} />}
    </>
   );
}

Then use that component as:

data.categories.map((item) => <ShowOnHover item={item} />)