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