Displaying an image when item is hovered

Question

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

Answer 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 separate component for your list i.e a separate component named Icon which will contain the following code.

import React from 'react'

const Icon= ({id, name, url, git, img, link}) => {
  const [inHoverIcons, setHoverIcons] = React.useState(false);
    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 Icon

And then you need to import that component in your main parent component and pass the icons props i.e.

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 [inHoverIcons, setHoverIcons] = React.useState(false);
        return (
            <>
            {icons.map((icon)=>{
                const {id, name , img ,url, link, git} =icon
                return(
                    <Icon id={id} name={name} , img={img} ,url ={url}, link={link}, git={git}}>         
                )
            })}                        
            </>
        )
    }
    export default windowsIcons