This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "Prop Collections & Exercise" Lesson
[00:00:00]
>> Kent C. Dodds: Prop collections. [COUGH] This is actually very similar to the next exercise, which is called prop getters. And so we'll probably only do one of these exercises. I think we will do, let's do prop collections, and then I'll show you prop getters. So the situation here is we've got two mechanisms for toggling the component.
[00:00:32] And they share similar props, they're both gonna have an area expanded on these and they're both gonna have an onClick. And so sometimes when you're creating a render prop components, there are certain collection of props that make sense, or certain use cases, certain things that people are going to render that will always need certain props.
[00:00:56] And so you can provide useful collections of props that people can just apply to the thing that they render. Maybe a better example of this is in Downshift, where we're actually using prompt getters. But the same idea applies, if we just look at the example here. Pretty much every auto complete is gonna have an input.
[00:01:19] And so we have this collection of props that we want you to apply to the input that you render. Cuz once we leave the ownership of the UI we are not the ones applying props to things anymore, you have to be responsible for that. But for us to wire your input to the internal state of downshift, and all the quick handlers, and whatever else that we need, we need you to apply those props for us.
[00:01:45] Also there's getItemProps, so every item needs to have certain props for accessibility and stuff like that. So that's the basic idea of prop collections. Cuz it's just a useful feature to provide a collection of props that you'd normally use for certain use cases. Normally, you could actually accomplish those use cases without these collections of props.
[00:02:11] Your render prop should actually pass all the state and other helpers that are necessary to accomplish the task. But having these collections of props can be really useful. And so in step five, I actually refactored that object that was in line 2 a function called getStateAndHelpers. In downshift, this is actually a pretty sizeable function, there is a lot of stuff that we pass to you.
[00:02:36] Here it is just two, we're gonna add another one here. But I kinda like having it separate so that I have one place to look for where those things are. And eventually we'll reuse that in other places. So that's one change for me from what you might have had.
[00:02:53]
>> Kent C. Dodds: But yeah, that's the basic intro. Here's the usage example. So we have the toggler propsand we'll apply that to both the switch and the button. So they can have the prompts that they need. Okay, any questions about this one?
>> Kent C. Dodds: Okay, let's jump in, we'll go to test number five, swap out the final for the exercise and npm t to run the test.
[00:03:23]
>> Kent C. Dodds: And make that work.