How to change hidden property onHover with useState?

I have a card component and want to change the ‘hidden’ property on a div that acts as an overlay when you hover over the card.

I´m not sure how to change the class properties of a div when using useState and TailwindCSS. I realize the “const´s” I have in the code, don´t do anything but I was trying to figure it out.

** I´m using NextJS and TailwindCSS

import React from 'react'
import Image from 'next/Image'
import { useState } from 'react'

function TeamCard(props) {

    const [showOverlay, setshowOverlay]=useState(false);
    const hovering = () => setshowOverlay(true);
    const notHovering = () => setshowOverlay(false);


  return (
    <div>
        <div>
            <div className='flex flex-col my-5 relative '>

                {/* Main card content */}

                <div onMouseEnter={hovering} onMouseLeave={notHovering}>
                    <Image
                        src='/alex1.jpg'
                        width="350"
                        height="350"
                        objectFit='cover' 
                    />
                    <h2 className='text-xl my-2'>{props.fullName}</h2>
                    <p className='font-light'>{props.jobTitle}</p>
                    <p className='font-light'>{props.department}</p>
                </div>

                {/* Overlay */}
                
                <div className=' absolute top-0 bg-black w-full h-full space-between hidden'>
                    <div className='flex flex-col'>
                        <h2 className='text-xl my-2'>{props.fullName}</h2>
                        <p className='font-light'>{props.jobTitle}</p>
                        <p className='font-light'>{props.department}</p>
                    </div>
                    <div className='flex'>
                        <a href={props.linkedinUrl}>LINKEDIN</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
  )
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

What you can try is with the use of a ternary operator.

showOverlay ? true(something you want to show) : false(show null);

...
 <div onMouseEnter={hovering} onMouseLeave={notHovering}>
                    <Image
                        src='/alex1.jpg'
                        width="350"
                        height="350"
                        objectFit='cover' 
                    />
                    <h2 className='text-xl my-2'>{props.fullName}</h2>
                    <p className='font-light'>{props.jobTitle}</p>
                    <p className='font-light'>{props.department}</p>
                </div>
{
         showOverlay ? 
                <div className=' absolute top-0 bg-black w-full h-full space-between hidden'>
                    <div className='flex flex-col'>
                        <h2 className='text-xl my-2'>{props.fullName}</h2>
                        <p className='font-light'>{props.jobTitle}</p>
                        <p className='font-light'>{props.department}</p>
                    </div>
                    <div className='flex'>
                        <a href={props.linkedinUrl}>LINKEDIN</a>
                    </div>
                </div>
                :
                null
...
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0