1
00:00:01,620 --> 00:00:06,240
The next thing to do inside of our dropdown is to make sure that we can open it and close it by default,

2
00:00:06,300 --> 00:00:09,780
the dropdown should be closed whenever user clicks on this thing.

3
00:00:09,960 --> 00:00:14,430
We should open and show this list of options whenever user clicks on the individual item.

4
00:00:14,610 --> 00:00:18,150
We should close the thing backup while also selecting that new item.

5
00:00:19,060 --> 00:00:23,060
Now, there's definitely two ways that you might think that we could make this thing close up.

6
00:00:23,540 --> 00:00:29,990
The first way we could possibly do this would be to conditionally hide or show the rendered options.

7
00:00:30,610 --> 00:00:35,560
So if we want to close the dropdown, we could say maybe don't return any options at all or even return

8
00:00:35,560 --> 00:00:36,210
an empty ray.

9
00:00:36,760 --> 00:00:40,430
And if we want the thing open, just go ahead and do the same thing that we've got right here.

10
00:00:41,240 --> 00:00:44,900
However, if we did that, we would end up with a kind of strange looking dropdown.

11
00:00:45,500 --> 00:00:47,390
In other words, if we just hide our list of options.

12
00:00:47,420 --> 00:00:49,100
Let me show you what that would really look like.

13
00:00:50,010 --> 00:00:52,680
I'm going to manually do delete two elements here.

14
00:00:54,520 --> 00:00:59,860
That's what I would look like if we just did not show the list now visibly, it might look OK, but

15
00:00:59,860 --> 00:01:04,270
you might notice that the borders here on the left hand side are kind of sharp corners.

16
00:01:05,160 --> 00:01:08,850
And we don't really have the same color border on the top as we do on the bottom.

17
00:01:09,630 --> 00:01:13,250
But just removing the list is not quite how we are supposed to close this dropdown.

18
00:01:13,770 --> 00:01:19,470
Instead, the real way to close the dropdown is to apply a list of CSX classes or remove them.

19
00:01:19,860 --> 00:01:20,730
Let me show you what I mean.

20
00:01:22,290 --> 00:01:26,670
So back inside of our big G.S. X block, at the bottom of our drop down components are going to find

21
00:01:26,700 --> 00:01:28,350
two specific elements.

22
00:01:29,010 --> 00:01:33,120
First is going to be a div with class name UI selection dropdown, visible, active.

23
00:01:34,000 --> 00:01:38,010
The other day I'm going to find is one right here with many visible transition.

24
00:01:39,370 --> 00:01:44,360
I'm going to first remove visible active, so I'm just going to manually delete those and then I'm going

25
00:01:44,360 --> 00:01:47,350
to manually delete visible transition as well.

26
00:01:48,550 --> 00:01:53,200
If we remove those class names and then save the file and flip back over, you'll see the dropdown is

27
00:01:53,200 --> 00:01:55,150
in a very nice closed state.

28
00:01:55,720 --> 00:01:57,480
So we've got the rounded edges right there.

29
00:01:57,490 --> 00:01:59,590
We don't have any extra shadow underneath it.

30
00:01:59,920 --> 00:02:03,430
This is definitely how a dropdown is supposed to look when it is closed.

31
00:02:04,930 --> 00:02:05,970
That close our job down.

32
00:02:06,070 --> 00:02:09,540
We really want to do is not hide or show rendered options.

33
00:02:09,960 --> 00:02:14,460
We really want to toggle the existence of these classes if we want to open it.

34
00:02:14,520 --> 00:02:17,940
We want to have a class of visible, active and visible transition.

35
00:02:18,180 --> 00:02:18,870
We want to close it.

36
00:02:19,080 --> 00:02:20,400
We want to remove those classes.

37
00:02:20,760 --> 00:02:21,620
And that's pretty much it.

38
00:02:22,590 --> 00:02:23,730
So how can we do that?

39
00:02:24,540 --> 00:02:28,680
Well, a very simple way to accomplish this would be to add a new piece of state to our component.

40
00:02:29,160 --> 00:02:34,050
This new piece of state would keep track of whether or not the component is open at any given time.

41
00:02:34,800 --> 00:02:37,860
We can then toggle that piece of state from true to false.

42
00:02:38,790 --> 00:02:40,080
Whenever a user clicks on it.

43
00:02:41,080 --> 00:02:46,800
So true, I mean, that we want to add in these classes and show the dropdown is open and maybe a value

44
00:02:46,800 --> 00:02:49,740
of would mean don't show these classes and show it is closed.

45
00:02:50,950 --> 00:02:56,830
Let's go ahead and add in this new piece of state and then use it to toggle the existence of those classes.

46
00:02:58,870 --> 00:02:59,860
At the top of my component.

47
00:03:01,570 --> 00:03:04,210
I will declare a new piece of state called Open.

48
00:03:06,770 --> 00:03:11,720
I'll give it a default value of false, does your guests open, it's going to mean if it's true.

49
00:03:11,780 --> 00:03:17,010
Let's show the dropped on his open, but we will initialize it to be false, which means start off with

50
00:03:17,010 --> 00:03:18,110
the thing being closed.

51
00:03:19,660 --> 00:03:23,520
I'm going to make sure I also import the you state hook before I forget.

52
00:03:25,590 --> 00:03:26,700
OK, so now.

53
00:03:28,190 --> 00:03:30,690
Back down on this d'Hiv right here.

54
00:03:32,360 --> 00:03:34,200
We will add in in on handler.

55
00:03:36,850 --> 00:03:42,770
And inside this unclick handler, whenever user clicks on this div, we're going to flip the value of

56
00:03:42,770 --> 00:03:43,130
open.

57
00:03:43,490 --> 00:03:45,290
So if it's currently true, we'll take it a false.

58
00:03:45,320 --> 00:03:45,780
If it's false.

59
00:03:45,800 --> 00:03:46,580
We'll take it to true.

60
00:03:47,390 --> 00:03:47,990
Go inside there.

61
00:03:47,990 --> 00:03:54,230
We'll call set open and then provide the opposite of whatever the current value of open is.

62
00:03:56,790 --> 00:03:58,560
So we've now got that open flag.

63
00:03:58,980 --> 00:04:04,530
Now we need to use it to toggle those two classes and those two classes to do so.

64
00:04:04,620 --> 00:04:07,080
We'll just use some very plain string templating.

65
00:04:08,390 --> 00:04:11,300
Now, the changes I'm going to make here are going to be very quick.

66
00:04:11,390 --> 00:04:12,350
Several little changes.

67
00:04:13,940 --> 00:04:16,880
I'm going to wrap this class name with a set of curly braces.

68
00:04:19,470 --> 00:04:22,860
I'll then replace the double quotes with Back Tick's.

69
00:04:24,780 --> 00:04:30,840
I'm then going to put in a dollar sign and curly brace right in front of Visible and then close off

70
00:04:30,840 --> 00:04:32,730
that curly race on the other side of active.

71
00:04:34,870 --> 00:04:39,090
I'll then wrap visible and active with a single quote, not back ticks.

72
00:04:39,400 --> 00:04:40,360
Does it really matter in this case?

73
00:04:40,390 --> 00:04:42,760
But I'm just gonna use single quotes.

74
00:04:43,970 --> 00:04:48,900
And then we're going to put this thing inside of a ternary expression to decide whether or not we want

75
00:04:48,900 --> 00:04:55,800
to put in visible active, they're going to say if open is true, then add visible active to the overall

76
00:04:55,800 --> 00:04:56,190
string.

77
00:04:57,150 --> 00:04:58,950
Otherwise, if open is false.

78
00:05:00,120 --> 00:05:01,500
Then put an empty string.

79
00:05:03,580 --> 00:05:07,780
That's it, and that's how we're going to toggle whether or not those class names are being applied.

80
00:05:08,620 --> 00:05:11,860
We're not gonna repeat that same procedure on the other div down here as well.

81
00:05:13,110 --> 00:05:16,400
Well, on the other d'Hiv, the one with menu visible transition.

82
00:05:17,090 --> 00:05:23,930
I will again wrap this with curly braces, replace the double quotes with back ticks in front of visible

83
00:05:24,020 --> 00:05:25,340
and put in a dollar sign.

84
00:05:25,400 --> 00:05:28,950
Curly brace blows off the curly brace on the other side of transition.

85
00:05:30,420 --> 00:05:32,730
Wrap that whole string with single quotes.

86
00:05:34,650 --> 00:05:39,150
And then insert the ternary will say if open is true with a question mark.

87
00:05:40,200 --> 00:05:41,760
Then apply visible transition.

88
00:05:42,180 --> 00:05:43,650
Otherwise, if it is false.

89
00:05:45,140 --> 00:05:47,360
I'll put in my colon and then empty string.

90
00:05:49,560 --> 00:05:49,830
All right.

91
00:05:49,860 --> 00:05:52,650
So it just made several very small changes very quickly.

92
00:05:53,070 --> 00:05:58,770
So, as usual, I would really encourage you to double check your exact syntax on these two lines of

93
00:05:58,770 --> 00:05:59,070
code.

94
00:05:59,430 --> 00:06:04,140
If you flip back over to your browser right now and you start to get an error message, it's definitely

95
00:06:04,140 --> 00:06:06,970
going to be tied to some the changes you just made on these two lines.

96
00:06:09,010 --> 00:06:14,350
Let's save all this, then flip back over and see how we're doing so now by default, are dropped down

97
00:06:14,350 --> 00:06:15,160
as nice and closed.

98
00:06:15,670 --> 00:06:17,350
And if we click on it, it opens up.

99
00:06:18,490 --> 00:06:23,320
I can then click on the currently selected item to close it, or I can click on, say, the color green

100
00:06:23,710 --> 00:06:26,710
to select Color Green and close the dropdown as well.

101
00:06:27,690 --> 00:06:27,910
OK.

102
00:06:27,990 --> 00:06:30,950
So I'd say this is a good looking dropdown.

103
00:06:31,140 --> 00:06:31,440
Right.

104
00:06:32,280 --> 00:06:35,370
Well, maybe there's one last small thing we need to change here.

105
00:06:36,400 --> 00:06:38,560
And this is really the point of this whole dropdown.

106
00:06:38,660 --> 00:06:42,860
This is where we are going to start to learn about an additional hook called Use RF.

107
00:06:43,650 --> 00:06:47,090
So this is going to seem like a very small nitpicked on my side.

108
00:06:47,390 --> 00:06:51,770
But nonetheless, let me show you what I don't quite like about this dropdown right now.

109
00:06:52,400 --> 00:06:57,080
If I open this dropdown, I can not click outside of it to close it.

110
00:06:57,540 --> 00:07:02,570
So I'm clicking all over my screen right now in the dropdown is staying open.

111
00:07:03,260 --> 00:07:05,870
That is definitely not very common when it comes to drop downs.

112
00:07:06,020 --> 00:07:10,910
Usually whenever we cook outside of a dropdown, we expect for the dropdown to be closed.

113
00:07:11,630 --> 00:07:16,070
And it's kind of annoying for a user to have to always click on that element right there to close the

114
00:07:16,070 --> 00:07:16,690
thing back up.

115
00:07:17,990 --> 00:07:22,790
So I think would be really fantastic if we just made sure that clicking outside the dropdown closed

116
00:07:22,880 --> 00:07:23,510
the dropdown.

117
00:07:24,170 --> 00:07:28,700
And that's what we are going to spend a pretty good amount of time to implement in the coming videos.

118
00:07:28,730 --> 00:07:34,220
Believe it or not, adding in this functionality is going to be more challenging than you might ever

119
00:07:34,280 --> 00:07:34,670
think.

120
00:07:36,050 --> 00:07:39,320
So let's take a pause right here and start to discuss why this is challenging.

121
00:07:39,410 --> 00:07:40,040
In just a moment.