1
00:00:01,080 --> 00:00:04,860
The next thing we're going to do to work on our dropdown is create a piece of state inside of our app

2
00:00:04,860 --> 00:00:08,550
component kit to keep track of what option is currently selected.

3
00:00:09,150 --> 00:00:13,230
The reason that we are doing this is that we might want to eventually have multiple instances of our

4
00:00:13,230 --> 00:00:14,210
drop down component.

5
00:00:15,860 --> 00:00:20,570
The app might want to know what the currently selected option is inside this one and this one.

6
00:00:21,160 --> 00:00:23,860
So we might eventually have to create two separate pieces of state.

7
00:00:23,930 --> 00:00:26,060
Maybe one would be selected color.

8
00:00:26,700 --> 00:00:31,250
And if the other one was to say, select a country or something like that, we could have selected.

9
00:00:32,340 --> 00:00:37,530
Country and then the app component would know the information or the current selection from both these

10
00:00:37,530 --> 00:00:38,460
different drop downs.

11
00:00:39,730 --> 00:00:45,820
So to implement this, we not only need a piece of states inside of our app that we can pass down to

12
00:00:45,820 --> 00:00:48,010
tell the dropdown what the currently selected item is.

13
00:00:48,400 --> 00:00:51,040
We also need to have some kind of setter as well.

14
00:00:51,790 --> 00:00:56,620
We're going to take the other thing that we get back from making use of the you state hook, which should

15
00:00:56,620 --> 00:00:58,240
be our center for selection.

16
00:00:58,910 --> 00:01:01,360
And we will also pass that down into the dropdown.

17
00:01:01,780 --> 00:01:05,890
So whenever the user changes the currently selected item, we can change the selected item.

18
00:01:07,130 --> 00:01:10,850
All right, so back over to our rap component and let's create a piece of state.

19
00:01:11,780 --> 00:01:14,210
Here's my app component at the top of it.

20
00:01:14,560 --> 00:01:17,360
I put in selected and set selected.

21
00:01:18,670 --> 00:01:20,050
That will come from you state.

22
00:01:21,200 --> 00:01:26,890
I'm going to give it a default value right now of the first option inside of our options array.

23
00:01:28,340 --> 00:01:31,930
But to give it the default value, we will put in options at zero.

24
00:01:32,020 --> 00:01:32,470
Like so.

25
00:01:34,220 --> 00:01:39,890
We will then pass that down as a prop into our dropdown that we'll put in selected is selected.

26
00:01:40,980 --> 00:01:43,790
And we will also provide the setter as well.

27
00:01:43,880 --> 00:01:47,720
So whenever someone changes the current setting inside the dropdown, whenever they click, when the

28
00:01:47,720 --> 00:01:48,410
other options.

29
00:01:48,770 --> 00:01:52,190
We can tell our app component to update its selected piece of state.

30
00:01:53,070 --> 00:01:54,770
I can give myself a little bit of space.

31
00:01:57,860 --> 00:02:05,190
And it will pass down a prop called On Selected Change, and that will be the set selected function.

32
00:02:05,790 --> 00:02:09,390
Now, remember, prop names are entirely whatever you want them to be.

33
00:02:09,780 --> 00:02:11,280
You'll notice that four selected right here.

34
00:02:11,310 --> 00:02:14,010
I chose to use just the same name as our piece of state.

35
00:02:14,490 --> 00:02:19,650
But because this is kind of an event handler of sorts or a callback, I'm following convention, which

36
00:02:19,650 --> 00:02:22,470
is to call it on something change.

37
00:02:24,690 --> 00:02:25,620
Gets that looks good.

38
00:02:25,920 --> 00:02:27,980
Let's make sure that we imported the use date.

39
00:02:28,110 --> 00:02:29,820
Hook inside the app dodgiest file.

40
00:02:30,390 --> 00:02:31,530
Go back up to the very top.

41
00:02:31,620 --> 00:02:33,000
Looks like I never imported that.

42
00:02:33,930 --> 00:02:34,310
We'll get you.

43
00:02:34,320 --> 00:02:35,010
Stay right there.

44
00:02:36,050 --> 00:02:36,320
All right.

45
00:02:36,910 --> 00:02:39,320
And I think that's it for our update James file right now.

46
00:02:39,770 --> 00:02:41,480
Let's go back over to our dropdown.

47
00:02:42,570 --> 00:02:49,260
Here's a dropdown we will receive both those props, those selected and on selected change.

48
00:02:49,800 --> 00:02:51,450
And we're going to wire them up to the component.

49
00:02:52,480 --> 00:02:59,350
First off, let's try to show what the currently selected item is, a member selected is going to be

50
00:02:59,350 --> 00:03:03,580
at that entire big object, like that object or that object or that object.

51
00:03:04,150 --> 00:03:08,860
So to help the user understand what the currently selected item is, we can print out the label.

52
00:03:09,840 --> 00:03:13,260
Of the currently selected item, we're going to print that out.

53
00:03:13,820 --> 00:03:17,730
We are currently we have that div with the class name of simply text.

54
00:03:18,420 --> 00:03:19,860
No, this div right here.

55
00:03:21,160 --> 00:03:23,800
Is responsible for showing that text right there.

56
00:03:24,370 --> 00:03:29,830
So we will print out the label of the currently selected item right there, instead replace Select Color.

57
00:03:33,680 --> 00:03:36,170
Selected, not label.

58
00:03:37,350 --> 00:03:39,690
Make sure that you do not update this label up here.

59
00:03:39,780 --> 00:03:41,100
That is a different label.

60
00:03:41,670 --> 00:03:44,880
That is always going to say something like select a color or something similar.

61
00:03:46,040 --> 00:03:47,270
OK, so let's save this.

62
00:03:47,630 --> 00:03:52,490
Go back over and now we can see that we've got our default selection right here of the color red because

63
00:03:52,520 --> 00:03:55,640
that was the default selection we set up inside of our app component.

64
00:03:56,700 --> 00:04:00,420
Now, the next thing we need to do is make sure that whenever a user clicks on one of these items,

65
00:04:00,690 --> 00:04:02,130
we select that one instead.

66
00:04:03,110 --> 00:04:07,160
That means we need to set up a click event handler on each of these different options that we render

67
00:04:07,610 --> 00:04:08,810
whenever user clicks on one.

68
00:04:08,900 --> 00:04:11,690
We're going to call that on selected change callback.

69
00:04:12,110 --> 00:04:14,240
That will update our state inside the app component.

70
00:04:16,100 --> 00:04:18,170
Trying to find where we render that list of options.

71
00:04:19,550 --> 00:04:24,470
On the dip that we created inside there, for each option, we'll give ourselves the space.

72
00:04:27,070 --> 00:04:29,480
And then put in an on click event handler.

73
00:04:32,130 --> 00:04:36,560
So whenever someone clicks on this div, I want to call the on selected change.

74
00:04:37,660 --> 00:04:40,840
With the option that we are rendering.

75
00:04:42,460 --> 00:04:46,780
Inside of here, we will do on selected change with option.

76
00:04:50,040 --> 00:04:50,910
So let's save this.

77
00:04:52,330 --> 00:04:58,510
Go back over and do a quick test which nebular to click on any of these items and see if these selected

78
00:04:58,510 --> 00:05:00,170
item right there inside the dropdown change.

79
00:05:01,060 --> 00:05:03,070
Well, looks like it's definitely working correctly.

80
00:05:04,600 --> 00:05:07,480
Just to really make sure that it's super clear on what's going on now.

81
00:05:07,960 --> 00:05:11,590
Whenever we click on one those dives, we are calling on selected change.

82
00:05:12,710 --> 00:05:15,170
Unselected change from our apt J.S. file.

83
00:05:16,500 --> 00:05:21,810
Is the set selected function that is going to update our selected piece of state.

84
00:05:21,870 --> 00:05:28,380
It will cause the app component to re render and then pass down the newly selected option, the dropdown

85
00:05:28,380 --> 00:05:28,830
component.

86
00:05:28,890 --> 00:05:31,740
Then in turn takes that newly selected option.

87
00:05:33,180 --> 00:05:39,730
It renders itself and it shows that newly selected options label property inside of that div right there.

88
00:05:41,790 --> 00:05:42,060
All right.

89
00:05:42,090 --> 00:05:43,290
So this is looking pretty good.

90
00:05:43,710 --> 00:05:48,810
But already there's simply one or two improvements we could probably make inside of here, for example.

91
00:05:48,870 --> 00:05:54,450
It's kind of awkward for a user to select an item and then still see that item inside the list.

92
00:05:54,990 --> 00:05:59,970
It might be a little bit better if whatever the currently selected item is doesn't show up on the list.

93
00:06:00,060 --> 00:06:02,790
So the user understands, oh, I can't select that item again.

94
00:06:03,230 --> 00:06:07,350
Does really make sense to already have the color red selected and selected a second time.

95
00:06:07,440 --> 00:06:10,560
Not a lot of sense there, but definitely one or two improvements we can make.

96
00:06:10,860 --> 00:06:13,440
It would also be nice, of course, if we could close the dropdown.

97
00:06:14,160 --> 00:06:16,240
Let's start to make some these changes in just a moment.