How do I display the right sub-menu item when parent-menu item is hovered in React

Question

I'm having problems displaying the correct sub-menu-item when I hover the mouse on the parent menu-item. I'm stuck and I don't know what to do to direct my code to display the correct sub-menu-item.

These are the things that I have done so far:

1. Created a component for the menu with menu-items
2. Created state to display and hide the sub-menu-item's.
3. Applied basic CSS styles.

The problem is I can't manage to make the first sub-menu-item to display its own menu.

==JSX==

import React, {Component} from 'react'
import './menuPrimary.styles.css'
import { Link } from 'react-router-dom'
import { ReactComponent as Logo} from '../../assets/underArmourLogo.svg'


class MenuPrimary extends Component {
  state = {
    isOpen: false
  }

handleMouseEnter = () =>
this.setState({
  isOpen: true
})

handleMouseLeave = () => 
this.setState({
  isOpen: false
})

render() {
  const isOpen =  this.state.isOpen ? 'is-open' : '';
return (
  <div id='header' className='global-header'>
    <div className='primary-logo'>
      <Link className='primary-logo__link'>
        <Logo/>
      </Link>
    </div>
    <nav id='primary-nav' className='navigation__wrapper'>
      <ul className='navigation clearfix'>
        <li className='first-level'>
          <Link
            className='navigation__link'
            onMouseEnter={this.handleMouseEnter}

          >NEW ARRIVALS</Link>
          <div
            className={`${isOpen} sub-navigation`}
            onMouseLeave={this.handleMouseLeave}    
          >
            <nav className='sub-navigation__wrapper sub-navigation_new-arrivals'>
              <div className='sub-navigation__categories'>
                <div className='sub-navigation__category-row'>
                  <div className='nav-group sub-navigation__category-group'>
                    <h5 className='sub-navigation__categories-header'>
                      <Link>NEW ARRIVALS</Link>
                    </h5>
                  </div> 
                </div>
              </div>
            </nav>
          </div>
        </li>
        <li className='first-level'>
          <Link 
            className='navigation__link'
            onMouseEnter={this.handleMouseEnter}

          >MEN</Link>
          <div
            className={`${isOpen ? 'is-open' : ''} sub-navigation`}
            onMouseLeave={this.handleMouseLeave}    
          >
            <nav className='sub-navigation__wrapper sub-navigation_new-arrivals'>
              <div className='sub-navigation__categories'>
                <div className='sub-navigation__category-row'>
                  <div className='nav-group sub-navigation__category-group'>
                    <h5 className='sub-navigation__categories-header'>
                      <Link>MEN</Link>
                    </h5>
                  </div> 
                </div>
              </div>
            </nav>
          </div>
        </li>
      </ul>
    </nav>
  </div>
);
}};export default MenuPrimary;

This is the link to my code: CodeSandBox

Answer 1

First you need to add a id into the Link html tag element.

i.e id="arrivals" and id="men".

Then you have to get the id from the event on the mouseenter and update the state with the current id.

Finally add a conditional display like.

${this.state.isOpen && this.state.anchorEl === 'arrivals'? "is-open": ""}

Check a working example here

working example here