Back inside of our code editor, let's create a new file inside of our components directory called DropDown
Dot J.S..
As usual, we'll put together just a little bit of boilerplate inside of here and then show that component
inside of our app component.
So at the very top, I will import react from react.
Well, then make a dropdown.
And right now, as usual, the simple H1.
It says dropdown.
And an export default dropped down at the bottom.
Let's now go back over to our APT.
James file.
Here's APJ, yes.
At the very top, we will import.
Once we've got that important place, well, then go down to the component itself and once again right
now, we're just going to manually change which component you're are displaying again later on as we
finish up all these different widgets.
We will eventually introduce some navigation between them.
So right now, we'll just delete, search and replace it with dropdown.
Let's save that and just do a quick refresh of our app over here.
And make sure that we see dropped down.
Very good.
All right.
That's simple enough.
Now, the next thing we're going to do is put together that options array.
No options, as we just discussed, is going to be an array of objects.
We're going to define options inside of our app component and then pass it down to the dropdown as props.
And it's going to specify what different options we want to show inside the dropdown.
So back inside of our app component file.
I'm going to declare right above the component self.
An array of options.
Now we can define this inside the component, outside the component.
It really doesn't make a difference because this is going to be a static array of data.
It's not going to change in any way.
So it doesn't matter if we define this inside the component or outside.
Inside of options, we'll put together three different objects and each one will have a label and a
value.
We will first put in a label of the color red.
The value of red.
A label of the color green.
With a value of green.
And then finally.
Label of a shade of blue, but the value of.
Now we can take this array of options and pass it down as a property into our drop down component.
We'll say options is options.
The whole goal behind this is to make sure that we can make use of the drop down component in different
places inside of application and have them show a different list of options to the user.
That's why we are defined this as props are we're gonna pass down.
So it looks good.
Let's take a pause here.
When I come back, the next video, we're going to start to add in a lot more jail sex inside of our
drop down component self.
We're going to map over that list of options and show it inside of some nice looking menu.