reactjs - How to make onMouseLeave in React include the child context? -

i building dropdown button learn react. have made 2 onmouseenter , onmouseleave events in parent div make visible when hovering disappear when not. problem events stick parent.

how make onmouseleave in react include child context? or, how can keep state expand true when hovering on children?

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 (         <div>             <div classname={styles.listtitle}             onmouseenter={this.handlehoveron}             onmouseleave={this.handlehoveroff}>             {this.props.name}             </div>             <div>             {react.children.map(this.props.children, function(child){             return react.cloneelement(child, {classname: 'child'});             })}             </div>         </div>      ); } } 

you have 2 different divs in dom don't overlap; i'll split render it's more obvious:

render() {     return (         <div>              <div classname={styles.listtitle}               onmouseenter={this.handlehoveron}               onmouseleave={this.handlehoveroff}>                 {this.props.name}             </div>              <div>                 {react.children.map(this.props.children, function(child){                     return react.cloneelement(child, {classname: 'child'});                 })}             </div>          </div>      ); } 

the div has onmouseleave attached not contain children; so, when mouse moves hover on child, leaves div , this.handlehoveroff called.

you might consider using css hide children if shouldn't displayed, or conditionally rendering them:

render() {     return (         <div classname={styles.listtitle}           onmouseenter={this.handlehoveron}           onmouseleave={this.handlehoveroff}>             {this.props.name}             {this.state.expanded && this.renderchildren()}         </div>      ); },  renderchildren() {     return (         <div>             {react.children.map(this.props.children, function(child){                 return react.cloneelement(child, {classname: 'child'});             })}         </div>     ); }