To improve our dropdown, let's make sure that whatever the currently selected item is doesn't show
up as an additional option inside the dropdown.
So, again, if I have color red selected, don't show it on the list.
To do so, we'll go back into our drop down component.
We will find rendered options here.
And then inside of the rendered options map statement.
Let's see if the currently selected item is equal to the option that we are currently iterating over.
So we'll say if option don't value.
So we're going to pare the comparative value in particular, if that value that we are currently iterating
over is equal to the selected options value.
Then let's immediately return.
No.
So inside of this array entry representing this option, inside of rendered options, we will end up
with null and null and react means don't render anything.
So now, without saying that, just really quickly, if we have the color red selected whenever we go
to render the color red, instead of making an option right there or a div, we will instead show no,
which is going to show up as nothing on the screen.
Let's now see this back over.
Now you'll notice that whatever the currently selected item is does not show up on the list.
So I can now click on the color green.
Now, green is no longer being displayed, but red is.
And if I click on Blue Now, blue is selected.
But Blue is not listed on our list.
All right.
That's a good little improvement nonetheless.
And we need to really take care of here is making sure that a user can click on the dropdown, maybe
the currently selected item, and close the dropdown entirely.
Let's take care of that in just a moment.