RenderPropsExample1

HoverState.js

import React from "react";

export default class HoverState extends React.Component {
  state = { isHover: false };

  handleHover = isHover => () => {
    this.setState({ isHover });
  };

  render() {
    return (
      <div
        onMouseOver={this.handleHover(true)}
        onMouseOut={this.handleHover(false)}
      >
        {this.props.render(this.state.isHover)}
      </div>
    );
  }
}

UsingHoverState.js

import React from "react";
import HoverState from "./HoverState";

export default class RenderProps extends React.Component {
  render() {
    return (
      <HoverState
        render={isHover => {
          if (isHover) {
            return <button>🦁</button>;
          }

          return <button>🦄</button>;
        }}
      />
    );
  }
}