1
00:00:01,760 --> 00:00:07,370
Inside of our drop down component, we can now receive that list of options going to D structure options

2
00:00:07,400 --> 00:00:08,660
out of our props object.

3
00:00:10,170 --> 00:00:14,610
We will then map over that list of options and build up a kind of list that we want to display to the

4
00:00:14,610 --> 00:00:14,970
user.

5
00:00:15,660 --> 00:00:21,160
So let's once again make a temporary variable up here and we'll call about rendered options.

6
00:00:22,530 --> 00:00:23,880
We'll do an options dot map.

7
00:00:26,450 --> 00:00:30,560
And for every option, we're going to return a little block of J.S. X.

8
00:00:33,000 --> 00:00:36,660
We're going to put a different side of your let's not forget to put our key in right away.

9
00:00:37,900 --> 00:00:43,500
Though, Aki, we can probably just use the value property of the option itself that we will put in

10
00:00:43,560 --> 00:00:44,810
option value.

11
00:00:46,860 --> 00:00:48,060
Well, then close off that d'Hiv.

12
00:00:49,770 --> 00:00:52,950
Inside, we're going to print out the options label.

13
00:00:54,210 --> 00:00:58,140
And then one other thing, on the day of itself, we'll put a class name on here of item.

14
00:01:00,300 --> 00:01:00,510
All right.

15
00:01:00,600 --> 00:01:02,910
That's going to generate our list of different options.

16
00:01:03,440 --> 00:01:08,670
Now we're going to take rendered options and embed it inside of a much larger block of JSM that we're

17
00:01:08,670 --> 00:01:10,500
gonna put together down here instead.

18
00:01:10,500 --> 00:01:11,520
That simple H one.

19
00:01:12,600 --> 00:01:13,910
It's going to delete that, each one.

20
00:01:15,240 --> 00:01:16,840
Replace it with a set of parentheses.

21
00:01:17,290 --> 00:01:20,150
And like I said, we're going to write out a pretty good amount of J.S. X year.

22
00:01:20,230 --> 00:01:21,670
That's going to build up the dropdown itself.

23
00:01:22,710 --> 00:01:24,290
The little bit of typing, let's get to it.

24
00:01:25,310 --> 00:01:29,030
First put together a div with a class name of UI form.

25
00:01:31,590 --> 00:01:35,670
Inside that will put together a div with the class name of field.

26
00:01:38,890 --> 00:01:43,120
Inside there will put a label with the class name of label.

27
00:01:44,340 --> 00:01:45,030
And close it off.

28
00:01:45,810 --> 00:01:50,610
And right now, I'm going to give that label some hard coded text of select a color.

29
00:01:51,450 --> 00:01:56,400
Now, if we put this hardcoded text of select a color inside this label, all the sudden we are not

30
00:01:56,400 --> 00:02:01,290
really making our dropdown reusable in nature anymore because we might try to show another drop down

31
00:02:01,290 --> 00:02:07,260
to a user that has them maybe select an age or a gender or a day of the week or something like that

32
00:02:07,260 --> 00:02:07,800
or a month.

33
00:02:08,180 --> 00:02:13,230
And if we always have the text hardcoded here of Select a color, hold the sun, the meaning of the

34
00:02:13,230 --> 00:02:16,020
dropdown starts to really just always be about colors.

35
00:02:16,440 --> 00:02:20,430
So you'll probably want to extract this label text right here to be a prop at some point time.

36
00:02:20,550 --> 00:02:21,960
And we will do that in just a little bit.

37
00:02:22,290 --> 00:02:24,360
Right now, we'll just go with a hardcoded value.

38
00:02:26,370 --> 00:02:31,530
After that label, we're gonna throw in another d'Hiv with a couple of different class names assigned

39
00:02:31,530 --> 00:02:31,950
to it.

40
00:02:32,670 --> 00:02:40,290
We're going to have class name of UI selection dropdown visible active.

41
00:02:41,560 --> 00:02:42,910
And it will close that d'Hiv off.

42
00:02:46,320 --> 00:02:50,220
I would encourage you to double check your spelling on all these different class names is if you have

43
00:02:50,310 --> 00:02:51,500
any typos inside there.

44
00:02:51,530 --> 00:02:53,370
The dropdown is not going to show up correctly.

45
00:02:55,070 --> 00:02:57,410
Inside the d'Hiv, we're then going to show an icon.

46
00:02:58,670 --> 00:03:01,680
The class name of dropdown icon.

47
00:03:03,530 --> 00:03:07,010
Now, technically, an eye tag is not really for an icon.

48
00:03:07,160 --> 00:03:10,790
It's really for italics in the classic HD most spec semantic UI.

49
00:03:10,820 --> 00:03:15,620
We'll just take eye elements with the appropriate class name and replace it or display an icon inside

50
00:03:15,620 --> 00:03:15,830
there.

51
00:03:16,220 --> 00:03:19,020
When I say we're going to show an icon, I doesn't stand for icon.

52
00:03:19,220 --> 00:03:21,650
It's just a convention that semantic UI makes use of.

53
00:03:23,550 --> 00:03:27,660
After the I mean, throw in a div with the class name of text.

54
00:03:31,910 --> 00:03:37,330
And I got to put in there select color right now, again, very similar to the label we're gonna replace

55
00:03:37,350 --> 00:03:38,030
in just a moment.

56
00:03:38,360 --> 00:03:41,360
Right now, I just want to put that text in there so you see what the purpose of it is.

57
00:03:42,170 --> 00:03:44,780
And then after that, our last tag, I promise.

58
00:03:45,710 --> 00:03:49,110
A class name with the menu visible.

59
00:03:51,260 --> 00:03:52,010
Transition.

60
00:03:55,620 --> 00:04:00,040
And inside that d'Hiv, that is where we are going to show our list of rendered options that we had

61
00:04:00,040 --> 00:04:01,330
just put together a moment ago.

62
00:04:02,730 --> 00:04:04,400
The rendered options.

63
00:04:06,270 --> 00:04:06,810
All right.

64
00:04:07,560 --> 00:04:08,010
That is it.

65
00:04:08,130 --> 00:04:08,820
Lot of typing.

66
00:04:09,820 --> 00:04:12,120
Let's save this and see what we have.

67
00:04:14,620 --> 00:04:16,540
OK, so it actually looks pretty reasonable.

68
00:04:17,140 --> 00:04:20,290
You'll notice right now that the dropdown is open by default.

69
00:04:20,710 --> 00:04:24,940
We will very quickly start to add in the ability to toggle whether this thing is open, but right now,

70
00:04:24,970 --> 00:04:25,450
good enough.

71
00:04:26,260 --> 00:04:29,950
You can see that the label hardcoded as select a color is displayed right there.

72
00:04:30,460 --> 00:04:32,020
So that is the label element.

73
00:04:33,080 --> 00:04:39,390
And then we also have select color right there, and that's where this div with costumed text is showing

74
00:04:39,390 --> 00:04:39,510
up.

75
00:04:40,230 --> 00:04:45,510
So eventually we probably want to replace select color with whatever the currently selected option is.

76
00:04:46,170 --> 00:04:47,550
That's what we're going to use this div for.

77
00:04:48,300 --> 00:04:50,880
And then finally, we've got our list of options showing up right here.

78
00:04:51,510 --> 00:04:53,250
The whole thing is really nicely styled.

79
00:04:53,430 --> 00:04:57,630
You can notice that whenever I mouse over one, these options, it is highlighted in my cursor, even

80
00:04:57,630 --> 00:05:01,350
turns into a little hand to indicate that the user should click to try to select this thing.

81
00:05:02,070 --> 00:05:06,210
Overall, this is definitely a good looking component and we just got a lot of styling for free of semantic

82
00:05:06,210 --> 00:05:09,780
UI, but we definitely have to add in a lot of functionality to this.

83
00:05:10,410 --> 00:05:11,490
Let's take another pause here.

84
00:05:11,560 --> 00:05:11,900
Welcome back.

85
00:05:11,940 --> 00:05:15,720
Next video, we'll start to make sure that we can toggle this thing, select a color and so on.