Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Advanced React Component Patterns Update

    Implement a Higher Order Component with Render Props

    Kent C. DoddsKent C. Dodds

    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.

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 You created this connected-toggle, and people are using it throughout the app to render the state of the toggle and manipulate the state of the toggle anywhere in the tree, but somebody comes to you and says, "Hey, listen. I just really like higher-order components. Could you make a higher-order component that I can use for my piece of the app?" You say, "Oh, OK. Sure."

    00:17 I'm going to go ahead and give us a shell higher-order component. We're going to implement the connected-toggle as a higher-order component. Here I created the withToggle higher-order component. It creates a wrapper component with a proper display name, prop types, wrapper component, and the non-react-statics stuff.

    00:32 Now the question is, what do we render inside of this wrapper component so that we have access to the toggled state and helpers? This connected-toggle gives us access to that. Let's go ahead, and we'll return connected-toggle. That accepts a prop called render. This is going to give us the toggle.

    00:50 Then inside of here we can render the component with the remaining props, and toggle equals toggle. With that, we can come down here and swap out the subtitle with the connected-toggle to just be a regular component that accepts a toggle prop. Then we'll wrap this in a withToggle higher-order component. Cool. Now everything seems to still work. That subtitle is still getting updated.

    01:22 We can use the withToggle, which ultimately implements the connected-toggle, or we can use the connected-toggle. This is one of the nice things about render props, is that you can implement a higher-order component using a render prop, but you can't really do it the other way around, so best to start with the render prop.

    01:38 To implement this, we created that higher-order component with the same song and dance that we normally do. Then we used our render prop and rendered the component that we're given with the remaining props and the enhancements that our higher-order component is doing for us.

    Discuss

    Discuss