ReactJs - Link dropdown should open separately while hovering

Question

I shortened the code but the logic is the same.

The problem is:

When I hover on "Home", the state activates for "Services" too and both of them make dropdowns open. I just want that: when I hover on "Home", "Link One" and "Link Two" appear, When I hover on "Services", "Link Three" and "Link Four" appear... now, when I hover on "services", the state changes for "home" the same way, same time. and both of their dropdowns appear at the same time...

Have you any ideas?

Should I create fiddle or codepen example for more clarity?

const Header = () => {
 const [menuHoverActive, setMenuHoverActive] = useState(false)

 const handleHoverOnMouseEnter = () => {
    setMenuHoverActive(true)
 }

 const handleHoverOnMouseLeave = () => {
    setMenuHoverActive(false)
 }

   return (
    <nav className="">
                    <ul className="xl:inline-flex xl:flex-row xl:ml-auto xl:w-auto w-full xl:items-center items-start flex flex-col xl:h-auto">
                        <li className="relative">
                            <Link
                                onMouseEnter={handleHoverOnMouseEnter}
                                onMouseLeave={handleHoverOnMouseLeave}
                                className=""
                                to="/"
                            >
                                Home
                            </Link>
                            {menuHoverActive ? (
                                <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                                    <li className="">
                                        <Link className="" to="/">
                                            Link One
                                        </Link>
                                    </li>
                                    <li className="">
                                        <Link className="" to="/">
                                            Link Two
                                        </Link>
                                    </li>
                                </ul>
                            ) : (
                                ''
                            )}
                        </li>
                        <li className="relative">
                            <Link
                                onMouseEnter={handleHoverOnMouseEnter}
                                onMouseLeave={handleHoverOnMouseLeave}
                                className=""
                                to="/"
                            >
                                Services
                            </Link>
                            {menuHoverActive ? (
                                <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                                    <li className="">
                                        <Link className="" to="/">
                                            Link Three
                                        </Link>
                                    </li>
                                    <li className="">
                                        <Link className="" to="/">
                                            Link Four
                                        </Link>
                                    </li>
                                </ul>
                            ) : (
                                ''
                            )}
                        </li>
                    </ul>
                </nav>
   )

  }

Answer 1

In your code, you are trying to handle multiple menus hover with one Boolean variable. But that's not possible. So look at the below solution I have managed it with an object.

Solution:

Used dyanamic variable to handle the hovering:

const Header = () => {
 const [menuHoverActive, setMenuHoverActive] = useState({})

 const handleHoverOnMouseEnter = (param) => {
    setMenuHoverActive({[param]: true });
 }

 const handleHoverOnMouseLeave = (param) => {
    setMenuHoverActive({[param]: false });
 }

   return (
    <nav className="">
       <ul className="xl:inline-flex xl:flex-row xl:ml-auto xl:w-auto w-full xl:items-center items-start flex flex-col xl:h-auto">
           <li className="relative">
              <Link
                  onMouseEnter={() => handleHoverOnMouseEnter('home')}
                  onMouseLeave={() => handleHoverOnMouseLeave('home')}
                  className=""
                   to="/"
               >
                  Home
               </Link>
              
               {menuHoverActive && menuHoverActive.home ? (
                  <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                      <li className="">
                         <Link className="" to="/">
                            Link One
                         </Link>
                       </li>
                       <li className="">
                          <Link className="" to="/">
                             Link Two
                          </Link>
                        </li>
                   </ul>
                ) : (
                    ''
            )}
        </li>
        <li className="relative">
           <Link
              onMouseEnter={() => handleHoverOnMouseEnter('services')}
              onMouseLeave={() => handleHoverOnMouseLeave('services')}
              className=""
              to="/"
            >
              Services
           </Link>
           {menuHoverActive && menuHoverActive.services ? (
             <ul className="flex bg-gray-700 flex-col xl:absolute xl:top-10">
                <li className="">
                   <Link className="" to="/">
                      Link Three
                   </Link>
                </li>
                <li className="">
                   <Link className="" to="/">
                      Link Four
                   </Link>
                </li>
             </ul>
          ) : (
             ''
         )}
      </li>
   </ul>
</nav> )}

Answer 2

Your state can hold only two possible values: true (hovering) or false (not hovering). You want to have (at least) three: 1. hovering on Home, 2. hovering on Services, and 3. not hovering on either.

One possible way would be to hold "home" or "services" for hovering states and, for instance, an empty string "" for not hovering on any.