title: How to make onMouseLeave in React include the child context?
body: <p>I am currently building a dropdown button to learn React. I have made two onMouseEnter and onMouseLeave events in the parent div to make it visible when hovering it disappear when not. The problem is that those events only stick to parent.</p>
  
  <p>How to make onMouseLeave in React include the child context?
  Or, how can I keep the state expand be true when hovering on children? </p>
  
  <pre><code>class DropDownButton extends React.Component {
  constructor(){
      super();
      this.handleHoverOn = this.handleHoverOn.bind(this);
      this.handleHoverOff = this.handleHoverOff.bind(this);
      this.state = {expand: false};
  }
  
  handleHoverOn(){
      if(this.props.hover){
          this.setState({expand: true});
      }
  }
  
  handleHoverOff(){
      if(this.props.hover){
          this.setState({expand: false});
      }
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;div className={styles.listTitle}
              onMouseEnter={this.handleHoverOn}
              onMouseLeave={this.handleHoverOff}&gt;
              {this.props.name}
              &lt;/div&gt;
              &lt;div&gt;
              {React.Children.map(this.props.children, function(child){
              return React.cloneElement(child, {className: 'child'});
              })}
              &lt;/div&gt;
          &lt;/div&gt;
       );
  }
  }
  </code></pre>