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
  • 246,420
  • 52
  • 367
  • 373
CacheGhost
  • 137
  • 13

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
  • 176
  • 4