Discussion on: Hoverable Component with Render Props

interface HoverableProps {
  children(hovered: boolean): React.ReactNode;
}

class Hoverable extends React.Component<HoverableProps> {
  state = { hovered: false };
  render() {
    return (
      <div
        onMouseEnter={() => this.setState({ hovered: true })}
        onMouseLeave={() => this.setState({ hovered: false })}
      >
        {this.props.children(this.state.hovered)}
      </div>
    );
  }
}