Discussion on: Hoverable Component with Render Props

View post

With typescript you could change the definition of the children prop type, or cast props to any before accessing children.

I would suggest to move the mouseEnter and Leave call backs to properties of the class so that you dont re create the functions every render pass

Rui Teixeira • Sep 2 '18 • Edited

Thanks for the tips!

For the ts children definition - what would it look like? The code below still complains that children is not a function. CodeSandbox

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

Rui Teixeira • Sep 2 '18

Actually once I updated the usage to use children there's no longer errors.

    <Hoverable>{hovered => <div>{hovered ? "🔥" : "🦄"}</div>}</Hoverable>

That's awesome! thanks!

Patrick Roza • Sep 2 '18

Sure, no worries.
I think the more correct would be:
children: (hovered: boolean) => void

As this implies a property with function signature instead of a method.

Rui Teixeira • Sep 2 '18

What is the difference between having it as a method or a property with function signature?