So I have created basic state on mouse hover that should when hovered on the specific element it would display the github Icon and when clicked in takes you to github code , but what happens is that when I hover on 1 Image it is displaying it on every image simultaneously I dont want that. So if you could help me I would be very grateful. Thanks
import React from 'react'
import {SiGithub} from "react-icons/si";
export const windowsIcons =[
{
id:9,
url:"https://menu-81c9a.web.app/",
name:"Menu",
img:"/images/icons/cmenu.png",
git: <SiGithub/>,
link: "https://github.comt",
},
{
id:10,
url:"https://quiz-3e578.web.app/",
name:"quiz",
img:"/images/icons/quiz.png",
git: <SiGithub/>,
link: "https://github.com/"
},
{
id:11,
url:"https://art-583b0.web.app/",
name:"Art",
img:"/images/icons/art.png",
link: "https://github.com/",
git: <SiGithub/>,
},
{
id:12,
url:"https://fir-882.web.app/",
name:"weather",
img:"/images/icons/iconsng",
link: "https://github.com/",
git: <SiGithub/>,
},
{
id:13,
url:"https://windows-3ec5a.web.app/",
name:"Ruksak",
img:"/images/icons/icons8-wtextpng",
git: <SiGithub/>,
link: "https://github.com/"
},
]
import React from 'react'
import {windowsIcons} from "../data"
import './WindowsIcons.css'
import { useGlobalContext } from '../context'
const WindowsIcons = () => {
const { icons }= useGlobalContext()
const [inHoverIcons, setHoverIcons] = React.useState(false);
return (
<>
{icons.map((icon)=>{
const {id, name , img ,url, link, git} =icon
return(
<div className='windows__icon' >
<li onMouseEnter={() => setHoverIcons(true)}
onMouseLeave={() => setHoverIcons(false)} className='windows__list' key={id}>
<a href={url}>
<img className='windows__image' src={img}/>
<h4 className='windows__text'>{name}</h4>
</a>
</li>
{inHoverIcons && <a href={link}className="">{git}</a>}
</div>
)
})}
</>
)
}
export default WindowsIcons
This is because you are using single state for each list element
inHoverIcons is for every list element in the map.
You can fix it by having a seperate component for your list i.e for this code.
And you will have to keep that state in that component.