悬停项目时显示图像

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

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