Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Dropdown component not displaying

I’m following a tutorial on youtube for creating a Navbar since I have no experience with Rect and JavaScript.I’m having a problem displaying a dropdown when hovering over a specific list item in my navbar (in the yt tutorial it works just fine) and I can’t figure out how to fix it.

import React, { useState } from 'react';
import { Button } from './Button';
import { Link } from 'react-router-dom';
import Dropdown from './Dropdown';
import './styles/nav-bar.css';

function NavBar() {

  const [click, setClick] = useState(false);
  const [dropdown, setDropdown] = useState(false);

  const handleClick = () => setClick(!click);

  const closeMobileMenu = () => setClick(false);

  const onMouseEnter = () => {
    if (window.innerWidth >= 960) {
      console.log("Testing onMouseEnter - Hovering over Tournaments list item") // test = OK
      setDropdown(true);
    }
  }
  const onMouseLeave = () => {
    setDropdown(false);
  };
    
  return(
    <>
      <nav className='navbar'>
        <Link to='/' className='navbar-logo'>
          <h2>KICKOFF</h2>
        </Link>
      
        <div className='menu-icon' onClick={handleClick}>
          <i className={click ? 'fas fa-times' : 'fas fa-bars'}></i>
        </div>

        <ul className={click ? 'nav-menu active' : 'nav-menu'}>
          <li className="nav-item">
            <Link to='/' className='nav-links' onClick={closeMobileMenu}>
              Home
            </Link>
          </li>
          <li className="nav-item">
            <Link to='/players' className='nav-links' onClick={closeMobileMenu}>
              Players
            </Link>
          </li>
          <li className="nav-item" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
            <Link className='nav-links' onClick={closeMobileMenu}>
              Tournament <i className='fas fa-caret-down' />
            </Link>
            {dropdown && <Dropdown />}
          </li>
          <li className="nav-item">
            <Link className='nav-links' onClick={closeMobileMenu}>
              Contact Us
            </Link>
          </li>
        </ul>
        <Button />
      </nav>
    </>
  );
}
export default NavBar;

Looks like the logic behind onMouseEnter function is to change dropdown to true so that this part of the code {dropdown && <Dropdown />} displays, but nothing happens.
Function onMouseEnter is working since I can see the message in ma console, but looks like the value is not changing right?
If it was changed it would display the Dropdown component.

This is the Dropdown component 

import React, { useState } from 'react';
import { MenuItems } from './MenuItems';
import { Link } from 'react-router-dom';
import './styles/dropdown.css';

function Dropdown() {

  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);

  return(
    <>
      <ul onClick={handleClick}
        className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
          {MenuItems.map((item, index) => {
            return(
              <li key={index}>
                <Link className={item.cName} to={item.path} onClick={() => { setClick(false) }} >
                  {item.title}
                </Link>
              </li>
            )
          })}
      </ul>
    </>
  );
}

export default Dropdown;

dropdown.css 

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 80px;
  list-style: none;
  text-align: start;
}
.dropdown-menu li {
  background: #292828;
  cursor: pointer;
}
.dropdown-menu li:hover {
  background: #424242;
}
.dropdown-menu.clicked {
  display: none;
}
.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  padding: 16px;
}

MenuItems component 

export const MenuItems = [
  {
    title: 'Home',
    path: '/',
    cName: 'dropdown-link'
  },
  {
    title: 'Players',
    path: '/players',
    cName: 'dropdown-link'
  },
  {
    title: 'Tournamets',
    path: '/tournaments',
    cName: 'dropdown-link'
  }
];
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found a fix but I'm not sure why it works. I changed class name of unordered list from 

    <ul onClick={handleClick}
        className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>

    to 

    <ul onClick={handleClick} className={click ? 'dropdown-closed' : 'dropdown-menu-opened'}>

    and then also modified the CSS file. This has no sense to me since this is the only place I'm using this className, I don't have it anywhere else in my code.


  2. 0

    it could be either that the screen you are testing in is smaller than 960, or that the menuItems array is empty

    try something like this :

      const onMouseEnter = () => {
    console.log(window.innerWidth); // test the innerwith
    if (window.innerWidth >= 100) { // just for testing you could modify later later
      console.log("Testing onMouseEnter - Hovering over Tournaments list item") // test = OK
      setDropdown(true);
}

    }

    and array

      const MenuItems = [
{ id: '0', title: 'menuItem1' },
{ id: '1', title: 'menuItem2' },
{ id: '2', title: 'menuItem3' },

    ];

    if the console.log of the onMouseEnter function are reacting, but the drop down isnt showing, it may be that the css styling is hiding the dropDown somewhere.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search