Displaying an image when item is hovered

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

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

  1. 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.

     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>          
        )
    

    And you will have to keep that state in that component.

    Reply

Leave a Comment