score:3

Accepted answer

you should use your event.target to achieve what you want. with this, you'll know which dropdown you're hovering and apply any logic you need. you can check for example if the dropdown you're hovering is the category dropdown like this:

if(e.target.classname === "class name of your element")
this.setstate({hoveredel: e.target.classname})

then you use it this state in your code to show/hide the element you want.

you can check an example on this fiddle i've created: https://jsfiddle.net/n5u2wwjg/153708/

i don't think you're going to need the onmouseleave event, but if you need you can follow the logic i've applied to onmouseover

hope it helps.

score:2

1. you need to save the state of each <li> item in an array/object to keep a track of hover states.

  constructor(props) {
    super(props);
    ...
    this.state = {
      hoverstates: {} // or an array
    };
  }

2. and set the state of each item in the event handlers.

handlemouseover = e => {
    this.setstate({
      hoverstates: {
        [e.target.id]: true
      }
    });
  };
  handlemouseleave = e => {
    this.setstate({
      hoverstates: {
        [e.target.id]: false
      }
    });
  };

3. you need to set the id (name doesn't work for <li>) in a list of menu items.

also make sure to add key so that react doesn't give you a warning.

  render() {
    const { hoverstates } = this.state;
    const menuitems = [0, 1, 2, 3].map(id => (
      <li
        key={id}
        id={id}
        onmouseover={this.handlemouseover}
        onmouseleave={this.handlemouseleave}
        classname={hoverstates[id] ? "hovering" : ""}
      >
        categories
        {hoverstates[id] ? (
          <ul classname="dropdown menu">
            <li>#{id} computerss & office</li>
            <li>#{id} electronics</li>
          </ul>
        ) : null}
      </li>
    ));

    return <ul classname="menu">{menuitems}</ul>;
  }

4. the result would look like this.

demo result

you can see the working demo here.

edit p7xr8ro9jx

shameless plug

i've written about how to keep a track of each item in my blog, keeping track of on/off states of react components, which explains more in detail.


Related Query

More Query from same tag