1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Advanced React Component Patterns Update

    This lesson was part of the Advanced React Component Patterns course, which has been updated to reflect the new patterns and API available in React 16.3+.

    Make Enhanced React Components with Higher Order Components

    reactReact

    The state shared between our toggle components is implicit because it lives inside context and is not easily accessible. In this lesson, we'll make a Higher Order Component (HOC) factory function which will allow the user to access that implicit state in their own components. Higher Order Components take a component and render a new component with some enhanced behaviors, in this case, the toggle context is added to the returned component. This factory component can get rid of duplicated code caused by needing to declare contextTypes on each component that needs it. Now we can wrap the component with withToggle and destructure on and toggle from the props.