Check out a free preview of the full Advanced React Patterns course:
The "Prop Collections Solution" Lesson is part of the full, Advanced React Patterns course featured in this preview video. Here's what you'd learn in this lesson:

Providing a prop collection allows people who use your render prop component to understand which properties are needed to render the component.

Get Unlimited Access Now

Transcript from the "Prop Collections Solution" Lesson

[00:00:00]
>> Kent C. Dodds: Alrighty, cool. So, lets go ahead and work through this and we'll swap out those implementations, run the tests, and take a look at this. So, we're not passing the right props to the switch component because toggler props doesn't exist. So, lets add toggler props to our state and helpers so toggle is a helper, this togglerProps is also a helper.

[00:00:27] So, what do we normally need to pass to buttons and the switch which is gonna pass that onto a button onto the hood. But what a buttons normally need to take? Well they'll need an on click. And also here in my notes I add we also want an already expanded.

[00:00:46] And so we'll just add that already expanded is this.state.on. And on click will be this.toggle. And that actually is all we need to do. So this is a prop collection for anybody who is using this component, if they want to render a toggler, whatever that means for them, these are probably the props that they need to apply.

[00:01:09] Now they could do these themselves just fine but it's a common enough case that we're gonna provide a prop collection for them. So does anybody have questions about this pattern?
>> Kent C. Dodds: Kind of used in combination with the rendered props that, I don't think that there's any other, like, I suppose there could be use cases with other patterns.

[00:01:31] But generally, this, yeah, makes the most sense as part of the render prop pattern.
>> Speaker 2: Is there any downside, or should any other pattern be used if it's like a ton of common props?
>> Kent C. Dodds: You mean like if this toggler props is a big object? Yes, actually and that's prop getters and we'll talk about that in a sec.

[00:01:53] Even with this many props, prop getters is actually a step up from this. Good question.