[React] Implement a Higher Order Component with Render Props

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