How can i hover in React using useState

I wanna toggle a class when hovering on a Container by changing the opacity from 0 to 1, I’ve used onmouseEnter and onMouseLeave 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 ?


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)} onMouseLeave={()=> isHover(false)}>
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
           <div className={`Info ${showIcons}`}>

                <div className="Icon">

                <div className="Icon">


export default SingleProject;

<— Css—>

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

.Info.Show {
    opacity: 1;

>Solution :

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

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

Leave a Reply