[React] Implement a Higher Order Component with Render Props

Posted 2020-10-18 Answer1215

When making a reusable component, you‘ll find that people often like to have the API they‘re most familiar with, so in this lesson we‘ll recreate the withToggle Higher Order Component using our new ConnectedToggle render prop component.

 

function withToggle(Component) {
  function Wrapper(props, context) {
    const {innerRef, ...remainingProps} = props
    return (
      <ConnectedToggle
        render={toggle => (
          <Component
            {...remainingProps}
            toggle={toggle}
            ref={innerRef}
          />
        )}
      />
    )
  }
  Wrapper.displayName = `withToggle(${Component.displayName ||
    Component.name})`
  Wrapper.propTypes = {innerRef: PropTypes.func}
  Wrapper.WrappedComponent = Component
  return hoistNonReactStatics(Wrapper, Component)
}