ReactJS Changing State When Hovering

I got an Array of Objects , each object contains properties of (id , image, title , subtitle) , then used the map method to display each object in a separate container , the thing is i wanted to use the useState hook to hide/unhide the title/subtitle portion when hovering over each container specifically (without effecting the other containers ) but it seems not working, would you kindly help me to solve this ( used styled-components)

const Animals = () => {
  const [selected, setSelected] = useState(false);

  return (
    <SectionAnimals>
      {AnimalsList.map((animal) => (
        <AnimalBox
          key={animal.id}
          onMouseEnter={(id) => {
            if (id == animal.id) return setSelected(true);
          }}
          onMouseLeave={(id) => {
            if (id == animal.id) return setSelected(false);
          }}
        >
          <AnimalImage src={animal.image} alt={animal.title} />
          {selected && (
            <>
              <AnimalTitle>{animal.title}</AnimalTitle>
              <AnimalSubtitle>{animal.subtitle}</AnimalSubtitle>
            </>
          )}
        </AnimalBox>
      ))}
    </SectionAnimals>
  );
};

So here selected should be a variable with scope limited to <AnimalBox>, which then has a way to detect itself being hovered over.

As it currently is, selected state change will affect every <AnimalBox> as each one of them have the exact same access to the exact same state.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.