You can use onMouseEnter and onMouseLeave to change the state and render a component conditionally based on the value of the state.
See it in action: https://codesandbox.io/s/XopkqJ5oV
import React, { Component } from 'react';
class HoverExample extends Component {
constructor(props) {
super(props);
this.handleMouseHover = this.handleMouseHover.bind(this);
this.state = {
isHovering: false,
};
}
handleMouseHover() {
this.setState(this.toggleHoverState);
}
toggleHoverState(state) {
return {
isHovering: !state.isHovering,
};
}
render() {
return (
Hover Me
{
this.state.isHovering &&
