How to change hidden property onHover with useState?

Question

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>
  )
}

Answer 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
...
}