react show button on mouse enter

Update the component's state to reflect whether the mouse is inside the component, then use the state value to conditionally render a button.

getInitialState() {
  return {
    isMouseInside: false
  };
}
mouseEnter = () => {
  this.setState({ isMouseInside: true });
}
mouseLeave = () => {
  this.setState({ isMouseInside: false });
}
render() {
  return (
    <div onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
      {this.state.isMouseInside ? <button>Your Button</button> : null}
    </div>
  );
}

Inside the render function we use the conditional operator (?) to return the button component if this.state.isMouseInside is truthy.

There is another approach that uses a reusable render component that would make components 'hoverable' or 'revealable' - whatever makes sense.

class Hoverable extends Component {
  constructor() {
    super();
    this.state = {
      isMouseInside: false
    };
  }

  mouseEnter = () => {
    this.setState({ isMouseInside: true });
  }

  mouseLeave = () => {
    this.setState({ isMouseInside: false });
  }

  render() {
    return this.props.children(
      this.state.isMouseInside, 
      this.mouseEnter, 
      this.mouseLeave
    )
  }
}

Then create the functional component that represents the hoverable element. E.g an album

const HoverableElement = props => (
  <Hoverable>
    {(isMouseInside, mouseEnter, mouseLeave) => (
      <div className="menu-item"> 
        <div onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
          <h2>{props.title}</h2>
        </div>
        {isMouseInside && props.children}
      </div>
    )}
  </Hoverable>
)

Finally, use the HoverableElement to render a list of elements that will each be 'hoverable' e.g an array of albums

class HoverableElementsList extends Component {
  render() {
    return (
      <div>
        <HoverableElement title="First Menu">
          <p>Some children content</p>
        </HoverableElement>
      </div>
    )
  }
}