Displaying an image when item is hovered

by

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

71 thoughts on “Displaying an image when item is hovered”

Leave a Comment