ReactJS Display Text When hovering related Image

I got three images , and an Array with three objects , each object is related to one of the images and contains a title and a paragraph , in ReactJS , i set my useState hook to render a text when ever i hover on the images , how i can modify my code in case whenever i hover on one of the images only the related text on specific object will be rendered below is the code

const AboutData = [
  { title: "Inatalling Furnature", Paragraph: "l" },
  { title: "Home Appliances", Paragraph: "2" },
  { title: "Tools", Paragraph: "3" },
];

function About() {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(!hover);
  };

  return (
    <>
      <Row>
        <Col12>{hover && <h1>{AboutData[0].title}</h1>}</Col12>
        <Col12>
          <Photocompo>
            <AboutImg>
              <Img1
                src={Image1}
                onMouseEnter={onHover}
                onMouseLeave={onHover}
              />
              <Img2
                src={Image2}
                onMouseEnter={onHover}
                onMouseLeave={onHover}
              />
              <Img3
                src={Image3}
                onMouseEnter={onHover}
                onMouseLeave={onHover}
              />
            </AboutImg>
          </Photocompo>
        </Col12>
      </Row>
    </>
  );
}

I wouldn’t store a boolean for hover, but initialise it with null and then on hover, set it to the index of the hovered image. So in your <h1> you could access the text with {AboutData[hover]}.

For onMouseLeave, I’d have a second handler that sets hover back to null.

Good option , actually i did solve the problem before coming across your replay , i made 3 different useState hooks for each of the images , and three different OnHover functions each function i added to each image , then used the logical operator in the paragraph section for each hover state with its prospective index in the Array to render the paragraph and title

Sure, that’s an option, too. Not really scalable if you wanted to add more images, but if it’s just three, the little repetition doesn’t hurt much.

1 Like

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