ReactJS Changing State When Hovering

JavaScript
1

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>
  );
};
2

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.

3

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