I am currently trying to make a webpage that displays multiple images, and when I hover on each image, they will display different text depending on the image. I was thinking of useState and useEffect, but I'm not entirely sure how to implement that. My current structure is that I have a list with an a tag and inside that i have an image.
You could probably use the built in onMouseEnter and onMouseLeave events and manage a state with an object containing an index of each image and its info through the events.
<img src={picture} onMouseEnter={() => //change the state} onMouseLeave={() => //return state back to default}></img>