How can i hover in React using useState-CodePudding

I wanna toggle a class when hovering on a Container by changing the opacity from 0 to 1, I've used onm ouseEnter and onm ouseLeave Event to toggle the class, but when I console hover state I see that is changing from true to false when I hover but the class "Show" is not changing. What do you think ?

<--Components-->

import React,{useState} from 'react';
import './MyWork.css';
import {Visibility, GitHub } from "@material-ui/icons";


const SingleProject = ({src, title}) => {
    const [hover, isHover] = useState(false);
    const showIcons = isHover ? "Show" : "";

    return (
        <div className="card-container" onMouseEnter={()=> isHover(true)} onm ouseLeave={()=> isHover(false)}>
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
           <div className={`Info ${showIcons}`}>

                <div className="Icon">
                    <GitHub/>
                </div>

                <div className="Icon">
                    <Visibility/>
                </div>

            </div>
        </div>
    )
}


export default SingleProject;

<--- Css--->

.card-container {
    height: 314px;
    width: 500px;
    cursor: pointer;
    position : relative;
}
.Info {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.Info.Show {
    opacity: 1;
}

CodePudding user response：

You are using the setter instead of the state itself on your condition. Change isHover with hover like below:

const showIcons = hover ? "Show" : "";

CodePudding user response：

When assigning the value to showIcons, you need to use hover instead of isHover which is the setter function for that state.

Additionally, I recommend naming the setter function setHover to avoid confusion and be more semantic. You can also add conditional Show class like this, which is more concise:

iconst SingleProject = ({src, title}) => {

    const [hover, setHover] = useState(false);

    return (
        <div
           className="card-container"
           onMouseEnter={()=> setHover(true)}
           onm ouseLeave={()=> setHover(false)}
        >
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
            <div className={`Info ${hover ? "Show" : ""}`}>
                <div className="Icon">
                    <GitHub/>
                </div>
                <div className="Icon">
                    <Visibility/>
                </div>
            </div>
        </div>
    )
}


export default SingleProject;