Search code examples
javascriptjqueryreactjshovermousehover

How to translate jQuery hover function into React

I have a hoverable map of the U.S. (each state changes color when it's hovered over) coded in jQuery that works fine as is, but I will ultimately need the whole thing to be rendered in React instead, if possible, and I'm having some trouble with the translation process...

$("path, circle").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

There are three other similar jQuery objects but I figure if I can get this one translated, I'll be able to figure out the others.

Solution

  • You can use onMouseEnter onMouseLeave events to simulate the hover event listener:

    handleHover(e){
    // Do something here...
}
render(){
    return (
       <svg>
          <path onMouseEnter={this.handleHover} onMouseLeave={this.handleHover} />
          <circle onMouseEnter={this.handleHover} onMouseLeave={this.handleHover} />
       </svg>
  )
}