Current section: Prop Collections and Getters 30 exercises
lesson

Intro to Prop Collections and Getters

Loading lesson

Transcript

00:00 Lots of components that you're building have very specific use cases and you expect people to need to access certain parts of your component or your hook state or they need to be able to access certain updater functions and maybe you're rendering an input that needs a key down. There

00:21 are lots of common use cases for your components and this is where prop collections and getters is useful. So the one-liner is the prop collections and getters pattern allows you your hook to support common use cases for UI elements people build with your hook. And I should say that the

00:38 prop collections half of this pattern is actually not recommended and you should use just the getters pattern. Now I developed this pattern as I was working on downshift. This is a enhanced input so you can build auto complete and combo box or select drop down components

00:55 with this set of components and hooks. So feel free to dive into this to get an idea of where the compound components or the prop collections and getter pattern how that all works in here. It's also found in a couple of the utilities that conform supports but it's right here this idea of

01:15 spreading the collection of props onto an element and being able to provide some data to that function that generates those props. In particular being able to provide your own overrides and

01:30 having this function compose things together which we're going to be doing in this exercise. So the idea is if we had a counter hook that managed the state of account maybe it would return the state and also a mechanism for updating the state but it also

01:48 could return a collection of props that could be applied to a particular UI that is common for this type of hook. And so we have this counter button props then and here are the children it's the count and here's the onclick here's the increment here are your attributes here's like whatever and

02:07 then the consumer can render their own components and then render those count counter button props. This is the prop collections pattern and then the getters half of this which is again the recommended thing to do we will reveal as part of this exercise. So this one yeah

02:27 it's going to be a lot of fun we'll see you in the exercise.