1
00:00:02,100 --> 00:00:06,900
To improve our dropdown, let's make sure that whatever the currently selected item is doesn't show

2
00:00:06,900 --> 00:00:09,240
up as an additional option inside the dropdown.

3
00:00:09,570 --> 00:00:12,660
So, again, if I have color red selected, don't show it on the list.

4
00:00:13,960 --> 00:00:16,660
To do so, we'll go back into our drop down component.

5
00:00:17,710 --> 00:00:19,570
We will find rendered options here.

6
00:00:20,680 --> 00:00:23,420
And then inside of the rendered options map statement.

7
00:00:23,930 --> 00:00:30,260
Let's see if the currently selected item is equal to the option that we are currently iterating over.

8
00:00:31,430 --> 00:00:34,500
So we'll say if option don't value.

9
00:00:34,560 --> 00:00:40,440
So we're going to pare the comparative value in particular, if that value that we are currently iterating

10
00:00:40,440 --> 00:00:43,820
over is equal to the selected options value.

11
00:00:46,560 --> 00:00:48,450
Then let's immediately return.

12
00:00:48,600 --> 00:00:48,960
No.

13
00:00:50,730 --> 00:00:55,740
So inside of this array entry representing this option, inside of rendered options, we will end up

14
00:00:55,740 --> 00:00:59,070
with null and null and react means don't render anything.

15
00:01:00,270 --> 00:01:05,480
So now, without saying that, just really quickly, if we have the color red selected whenever we go

16
00:01:05,480 --> 00:01:10,310
to render the color red, instead of making an option right there or a div, we will instead show no,

17
00:01:10,490 --> 00:01:12,530
which is going to show up as nothing on the screen.

18
00:01:13,510 --> 00:01:15,180
Let's now see this back over.

19
00:01:15,450 --> 00:01:19,220
Now you'll notice that whatever the currently selected item is does not show up on the list.

20
00:01:19,900 --> 00:01:21,550
So I can now click on the color green.

21
00:01:22,300 --> 00:01:24,960
Now, green is no longer being displayed, but red is.

22
00:01:25,630 --> 00:01:28,000
And if I click on Blue Now, blue is selected.

23
00:01:29,050 --> 00:01:31,570
But Blue is not listed on our list.

24
00:01:32,440 --> 00:01:32,680
All right.

25
00:01:32,710 --> 00:01:35,140
That's a good little improvement nonetheless.

26
00:01:35,150 --> 00:01:39,670
And we need to really take care of here is making sure that a user can click on the dropdown, maybe

27
00:01:39,670 --> 00:01:42,910
the currently selected item, and close the dropdown entirely.

28
00:01:43,540 --> 00:01:44,920
Let's take care of that in just a moment.