Inside of our drop down component, we can now receive that list of options going to D structure options
out of our props object.
We will then map over that list of options and build up a kind of list that we want to display to the
user.
So let's once again make a temporary variable up here and we'll call about rendered options.
We'll do an options dot map.
And for every option, we're going to return a little block of J.S. X.
We're going to put a different side of your let's not forget to put our key in right away.
Though, Aki, we can probably just use the value property of the option itself that we will put in
option value.
Well, then close off that d'Hiv.
Inside, we're going to print out the options label.
And then one other thing, on the day of itself, we'll put a class name on here of item.
All right.
That's going to generate our list of different options.
Now we're going to take rendered options and embed it inside of a much larger block of JSM that we're
gonna put together down here instead.
That simple H one.
It's going to delete that, each one.
Replace it with a set of parentheses.
And like I said, we're going to write out a pretty good amount of J.S. X year.
That's going to build up the dropdown itself.
The little bit of typing, let's get to it.
First put together a div with a class name of UI form.
Inside that will put together a div with the class name of field.
Inside there will put a label with the class name of label.
And close it off.
And right now, I'm going to give that label some hard coded text of select a color.
Now, if we put this hardcoded text of select a color inside this label, all the sudden we are not
really making our dropdown reusable in nature anymore because we might try to show another drop down
to a user that has them maybe select an age or a gender or a day of the week or something like that
or a month.
And if we always have the text hardcoded here of Select a color, hold the sun, the meaning of the
dropdown starts to really just always be about colors.
So you'll probably want to extract this label text right here to be a prop at some point time.
And we will do that in just a little bit.
Right now, we'll just go with a hardcoded value.
After that label, we're gonna throw in another d'Hiv with a couple of different class names assigned
to it.
We're going to have class name of UI selection dropdown visible active.
And it will close that d'Hiv off.
I would encourage you to double check your spelling on all these different class names is if you have
any typos inside there.
The dropdown is not going to show up correctly.
Inside the d'Hiv, we're then going to show an icon.
The class name of dropdown icon.
Now, technically, an eye tag is not really for an icon.
It's really for italics in the classic HD most spec semantic UI.
We'll just take eye elements with the appropriate class name and replace it or display an icon inside
there.
When I say we're going to show an icon, I doesn't stand for icon.
It's just a convention that semantic UI makes use of.
After the I mean, throw in a div with the class name of text.
And I got to put in there select color right now, again, very similar to the label we're gonna replace
in just a moment.
Right now, I just want to put that text in there so you see what the purpose of it is.
And then after that, our last tag, I promise.
A class name with the menu visible.
Transition.
And inside that d'Hiv, that is where we are going to show our list of rendered options that we had
just put together a moment ago.
The rendered options.
All right.
That is it.
Lot of typing.
Let's save this and see what we have.
OK, so it actually looks pretty reasonable.
You'll notice right now that the dropdown is open by default.
We will very quickly start to add in the ability to toggle whether this thing is open, but right now,
good enough.
You can see that the label hardcoded as select a color is displayed right there.
So that is the label element.
And then we also have select color right there, and that's where this div with costumed text is showing
up.
So eventually we probably want to replace select color with whatever the currently selected option is.
That's what we're going to use this div for.
And then finally, we've got our list of options showing up right here.
The whole thing is really nicely styled.
You can notice that whenever I mouse over one, these options, it is highlighted in my cursor, even
turns into a little hand to indicate that the user should click to try to select this thing.
Overall, this is definitely a good looking component and we just got a lot of styling for free of semantic
UI, but we definitely have to add in a lot of functionality to this.
Let's take another pause here.
Welcome back.
Next video, we'll start to make sure that we can toggle this thing, select a color and so on.