I have this arrays of objects that has the data in it
const teamSliderContent = [
{
Describtion1 : "Chef. Mordy Wenk",
Title : "Head of the Chief staff.",
Img : "https://user-images.githubusercontent.com/86873404/167750109-5c3dec09-3631-47ae-8823-9625ba9e904f.jpg",
id : 1
},{
Describtion1 : "Chef. Mark Brunnett",
Title : "Junior chef.",
Img : "https://user-images.githubusercontent.com/86873404/167750117-aa571b55-6e9e-4850-933d-ad357be73176.jpg",
id: 2
}]
In my code , I have a small icon that pop up when I hover on the Image
<InfoIcon style={iconMove} transition={"0.4s"} color="#46111D"
transform={"translate(-25px , 25px)"} fontSize={30} />
, so I'm achieving that with this code :
const [iconMove, setIconMove] = useState({transform:"translate(-25px , 25px)"})
<Image
onMouseEnter={e => {
setIconMove({transform:"translate(25px,-25px)"})
}}
onMouseLeave={e => {
setIconMove({transform:"translate(-25px , 25px)"})
}} src={item.Img} />
and that is done because I have OverFlow as hidden in the container of the image, so my problem is that when I hover on any Image of these , all icons pop up at the same time, how can I make it so only when I hover on certain image the icon of this only image pop up? I know that It's related to the id of each object but still I can't figure out how to do it. I hope my question was clear and simple
Each <Image> component will needs its own iconMove component state, so you need to store this separately at the <Image> component level.
The problem is that you update the style when hovering on a certain image and use that style for all InfoIcons. To get your desired solution you should keep track of what InfoIcon should receive the style.
Since the style used in the InfoIcon is only dependant on which image is hovered and which is not. I would suggest to update the state to keep track of the image that is hovered (this can be achieved by using the id or some other indicator like the index of the map).
const [hovered, setHovered] = useState(-1)
let show = {transform:"translate(25px,-25px)"}
let hide = {transform:"translate(-25px,25px)"}
<Image onMouseEnter={e => {setHovered(id)}}
onMouseLeave={e => {setHovered(-1)}} src={item.Img} />
And based on that state you can choose the style to use in the InfoIcon, this would look something like this.
<InfoIcon style={hovered == id ? show : hide} transition={"0.4s"} color="#46111D" fontSize {30} />