We are now all done with our little search widget, Sorina, start to move forward to our next one,
which is going to be a little dropdown.
And the overall goal of this dropdown is to get some more practice with you, state use effect and a
new hook that we're going to discuss called use RF.
The overall goal of the dropdown itself is to show some list of options the user is going to click on.
This little menu is going to open up.
And for this initial example, we're just gonna throw in some different colors that a user can select.
The red, green and blue.
Whenever a user changes a color selection, we're then going to update some text color immediately after
it.
That's pretty much it.
Now, the dropdown itself, we are going to make reusable, unlike the search over here.
So this little search widget, it was technically reusable, but it didn't really accept or receive
any props.
And so there was a limited ability for us to somehow customize how it worked with the dropdown.
On the other hand, we definitely got to make this thing reusable.
And that means that we need to be able to customize the options that are provided inside the dropdown.
So let's take a look at an architecture diagram or two and understand how we're gonna put this thing
together.
All right.
So we're once again going to have our app component.
It's going to show this dropdown, the app component is going to have a list of options.
So these are going to be the different options a user can select in the drop down menu.
These options will be provided as props down to the drop down component.
And the drop dropdown is going to use that set of options to decide what to show.
The options itself is going to be an array of objects.
So this might be a what the data structure looks like, there'll be an array of objects where every
object has a label and a value.
So in this case, if we pass down an array of objects that have red, green and blue, whenever a user
opens up that dropdown, we should show options.
Red, green and blue.
You might be curious why we have both a label and a value property.
Well, it's really straightforward when we show some text to the user right here.
We might want to not precisely say something like red.
We might want to say something like the color red and say the color green.
And a shade of blue.
The label is what actually gets displayed to the user.
The value is how we interpret whatever the user selects.
So a value of simply red is a lot easier for you and I to use in some way, then try to pass this label
and understand what the user just selected.
That's why we have both a label and a value.
Besides this set of props, we are also gonna have some state aid to this component as well.
We're going to call the states or the single piece of state selection and selection is going to record
what they currently selected.
Option is selection is going to exist inside of the parent component, which in this case is app.
And we're going to provide that down as a prop as well to the dropdown to tell it what it should currently
have selected.
You should really think of this as kind of like the relationship between a component and an input field
where, remember, we've got some kind of value that we specify on the input to tell it what the current
value of the input is.
Very similar for the dropdown here as well.
All right.
Let's just kind of a quick overview on some of the things we need to be aware of.
Now, if any of the stuff right now looks unclear, particularly around this selection, bit fully fine.
As soon as we start to write out some code, you'll have a good idea of what's going on.
Let's pause right here and then start to put together this dropdown in just a moment.