React Hoverable Render props example

Hoverable.js

import React, {Component} from 'react';

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,
        );
    }
}

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>
);

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

export {HoverableElement, HoverableElementsList};
export default Hoverable;