1

My child is preventing calling parent method when onMouseOver occurs. To better understand problem I'm adding code snippet and what I want to achieve.

  renderDropdown(){
    let dropState = !this.state.dropdownActive;
    this.setState({dropdownActive: dropState})
  }

<li key={item.class} onMouseOver={this.renderDropdown} onMouseLeave={this.renderDropdown}>{this.state.dropdownActive ? <div className="toolbar-dropdown"></div> : null}<i className={`fas ${item.class}`}></i></li>

When I hover on li element everything works as expected but when hover appears on <i> element method is not called. So the <i> element is covering the li method. How to fix this ?

enter image description here

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
CacheGhost
  • 159
  • 15

1 Answers1

2

The onMouseOver event fires again when the pointer enters a child element, toggling your dropdown state. Using onMouseEnter instead might work for you, as it will NOT fire again when the mouse enters a child element.

see this Stack Overflow question

jmarq
  • 186
  • 4