The next thing to do inside of our dropdown is to make sure that we can open it and close it by default,
the dropdown should be closed whenever user clicks on this thing.
We should open and show this list of options whenever user clicks on the individual item.
We should close the thing backup while also selecting that new item.
Now, there's definitely two ways that you might think that we could make this thing close up.
The first way we could possibly do this would be to conditionally hide or show the rendered options.
So if we want to close the dropdown, we could say maybe don't return any options at all or even return
an empty ray.
And if we want the thing open, just go ahead and do the same thing that we've got right here.
However, if we did that, we would end up with a kind of strange looking dropdown.
In other words, if we just hide our list of options.
Let me show you what that would really look like.
I'm going to manually do delete two elements here.
That's what I would look like if we just did not show the list now visibly, it might look OK, but
you might notice that the borders here on the left hand side are kind of sharp corners.
And we don't really have the same color border on the top as we do on the bottom.
But just removing the list is not quite how we are supposed to close this dropdown.
Instead, the real way to close the dropdown is to apply a list of CSX classes or remove them.
Let me show you what I mean.
So back inside of our big G.S. X block, at the bottom of our drop down components are going to find
two specific elements.
First is going to be a div with class name UI selection dropdown, visible, active.
The other day I'm going to find is one right here with many visible transition.
I'm going to first remove visible active, so I'm just going to manually delete those and then I'm going
to manually delete visible transition as well.
If we remove those class names and then save the file and flip back over, you'll see the dropdown is
in a very nice closed state.
So we've got the rounded edges right there.
We don't have any extra shadow underneath it.
This is definitely how a dropdown is supposed to look when it is closed.
That close our job down.
We really want to do is not hide or show rendered options.
We really want to toggle the existence of these classes if we want to open it.
We want to have a class of visible, active and visible transition.
We want to close it.
We want to remove those classes.
And that's pretty much it.
So how can we do that?
Well, a very simple way to accomplish this would be to add a new piece of state to our component.
This new piece of state would keep track of whether or not the component is open at any given time.
We can then toggle that piece of state from true to false.
Whenever a user clicks on it.
So true, I mean, that we want to add in these classes and show the dropdown is open and maybe a value
of would mean don't show these classes and show it is closed.
Let's go ahead and add in this new piece of state and then use it to toggle the existence of those classes.
At the top of my component.
I will declare a new piece of state called Open.
I'll give it a default value of false, does your guests open, it's going to mean if it's true.
Let's show the dropped on his open, but we will initialize it to be false, which means start off with
the thing being closed.
I'm going to make sure I also import the you state hook before I forget.
OK, so now.
Back down on this d'Hiv right here.
We will add in in on handler.
And inside this unclick handler, whenever user clicks on this div, we're going to flip the value of
open.
So if it's currently true, we'll take it a false.
If it's false.
We'll take it to true.
Go inside there.
We'll call set open and then provide the opposite of whatever the current value of open is.
So we've now got that open flag.
Now we need to use it to toggle those two classes and those two classes to do so.
We'll just use some very plain string templating.
Now, the changes I'm going to make here are going to be very quick.
Several little changes.
I'm going to wrap this class name with a set of curly braces.
I'll then replace the double quotes with Back Tick's.
I'm then going to put in a dollar sign and curly brace right in front of Visible and then close off
that curly race on the other side of active.
I'll then wrap visible and active with a single quote, not back ticks.
Does it really matter in this case?
But I'm just gonna use single quotes.
And then we're going to put this thing inside of a ternary expression to decide whether or not we want
to put in visible active, they're going to say if open is true, then add visible active to the overall
string.
Otherwise, if open is false.
Then put an empty string.
That's it, and that's how we're going to toggle whether or not those class names are being applied.
We're not gonna repeat that same procedure on the other div down here as well.
Well, on the other d'Hiv, the one with menu visible transition.
I will again wrap this with curly braces, replace the double quotes with back ticks in front of visible
and put in a dollar sign.
Curly brace blows off the curly brace on the other side of transition.
Wrap that whole string with single quotes.
And then insert the ternary will say if open is true with a question mark.
Then apply visible transition.
Otherwise, if it is false.
I'll put in my colon and then empty string.
All right.
So it just made several very small changes very quickly.
So, as usual, I would really encourage you to double check your exact syntax on these two lines of
code.
If you flip back over to your browser right now and you start to get an error message, it's definitely
going to be tied to some the changes you just made on these two lines.
Let's save all this, then flip back over and see how we're doing so now by default, are dropped down
as nice and closed.
And if we click on it, it opens up.
I can then click on the currently selected item to close it, or I can click on, say, the color green
to select Color Green and close the dropdown as well.
OK.
So I'd say this is a good looking dropdown.
Right.
Well, maybe there's one last small thing we need to change here.
And this is really the point of this whole dropdown.
This is where we are going to start to learn about an additional hook called Use RF.
So this is going to seem like a very small nitpicked on my side.
But nonetheless, let me show you what I don't quite like about this dropdown right now.
If I open this dropdown, I can not click outside of it to close it.
So I'm clicking all over my screen right now in the dropdown is staying open.
That is definitely not very common when it comes to drop downs.
Usually whenever we cook outside of a dropdown, we expect for the dropdown to be closed.
And it's kind of annoying for a user to have to always click on that element right there to close the
thing back up.
So I think would be really fantastic if we just made sure that clicking outside the dropdown closed
the dropdown.
And that's what we are going to spend a pretty good amount of time to implement in the coming videos.
Believe it or not, adding in this functionality is going to be more challenging than you might ever
think.
So let's take a pause right here and start to discuss why this is challenging.
In just a moment.