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

    Use Prop Collections with Render Props

    Kent C. DoddsKent C. Dodds

    Sometimes you have common use cases that require common props to be applied to certain elements. You can collect these props into an object for users to simply apply to their elements and we'll see how to do that in this lesson.

    reactReact
    javascriptJavaScript
    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 Often, users of the component that exposes our render prop API will have common use cases. For example, pretty much every user of the toggle component here is going to want to render a button that can toggle the state.

    00:11 Here, we have two. Our API is going to change slightly so we can support this common use case. We are going to expose a toggler props object, which can be spread across any toggler button that our consumers want to render.

    00:24 We are passing this.getStateAndHelpers to this.props.children. Let's go ahead and add a toggler props object here. This is going to have an OnClick handler for this.toggle and aria pressed is this.state.on.

    00:42 Now, this functionality totally works. The consumer of our API doesn't need to concern themselves about what it takes to wire up these two buttons to be togglers and this toggle component.

    00:52 In the future, we could change onClick to onKeyDown, if that made more sense. That could be an implementation detail of the toggle component. It allows consumers to apply the toggler props object to any button that they are rendering which fits this use case.

    Discuss

    Discuss