The next thing we're going to do to work on our dropdown is create a piece of state inside of our app
component kit to keep track of what option is currently selected.
The reason that we are doing this is that we might want to eventually have multiple instances of our
drop down component.
The app might want to know what the currently selected option is inside this one and this one.
So we might eventually have to create two separate pieces of state.
Maybe one would be selected color.
And if the other one was to say, select a country or something like that, we could have selected.
Country and then the app component would know the information or the current selection from both these
different drop downs.
So to implement this, we not only need a piece of states inside of our app that we can pass down to
tell the dropdown what the currently selected item is.
We also need to have some kind of setter as well.
We're going to take the other thing that we get back from making use of the you state hook, which should
be our center for selection.
And we will also pass that down into the dropdown.
So whenever the user changes the currently selected item, we can change the selected item.
All right, so back over to our rap component and let's create a piece of state.
Here's my app component at the top of it.
I put in selected and set selected.
That will come from you state.
I'm going to give it a default value right now of the first option inside of our options array.
But to give it the default value, we will put in options at zero.
Like so.
We will then pass that down as a prop into our dropdown that we'll put in selected is selected.
And we will also provide the setter as well.
So whenever someone changes the current setting inside the dropdown, whenever they click, when the
other options.
We can tell our app component to update its selected piece of state.
I can give myself a little bit of space.
And it will pass down a prop called On Selected Change, and that will be the set selected function.
Now, remember, prop names are entirely whatever you want them to be.
You'll notice that four selected right here.
I chose to use just the same name as our piece of state.
But because this is kind of an event handler of sorts or a callback, I'm following convention, which
is to call it on something change.
Gets that looks good.
Let's make sure that we imported the use date.
Hook inside the app dodgiest file.
Go back up to the very top.
Looks like I never imported that.
We'll get you.
Stay right there.
All right.
And I think that's it for our update James file right now.
Let's go back over to our dropdown.
Here's a dropdown we will receive both those props, those selected and on selected change.
And we're going to wire them up to the component.
First off, let's try to show what the currently selected item is, a member selected is going to be
at that entire big object, like that object or that object or that object.
So to help the user understand what the currently selected item is, we can print out the label.
Of the currently selected item, we're going to print that out.
We are currently we have that div with the class name of simply text.
No, this div right here.
Is responsible for showing that text right there.
So we will print out the label of the currently selected item right there, instead replace Select Color.
Selected, not label.
Make sure that you do not update this label up here.
That is a different label.
That is always going to say something like select a color or something similar.
OK, so let's save this.
Go back over and now we can see that we've got our default selection right here of the color red because
that was the default selection we set up inside of our app component.
Now, the next thing we need to do is make sure that whenever a user clicks on one of these items,
we select that one instead.
That means we need to set up a click event handler on each of these different options that we render
whenever user clicks on one.
We're going to call that on selected change callback.
That will update our state inside the app component.
Trying to find where we render that list of options.
On the dip that we created inside there, for each option, we'll give ourselves the space.
And then put in an on click event handler.
So whenever someone clicks on this div, I want to call the on selected change.
With the option that we are rendering.
Inside of here, we will do on selected change with option.
So let's save this.
Go back over and do a quick test which nebular to click on any of these items and see if these selected
item right there inside the dropdown change.
Well, looks like it's definitely working correctly.
Just to really make sure that it's super clear on what's going on now.
Whenever we click on one those dives, we are calling on selected change.
Unselected change from our apt J.S. file.
Is the set selected function that is going to update our selected piece of state.
It will cause the app component to re render and then pass down the newly selected option, the dropdown
component.
Then in turn takes that newly selected option.
It renders itself and it shows that newly selected options label property inside of that div right there.
All right.
So this is looking pretty good.
But already there's simply one or two improvements we could probably make inside of here, for example.
It's kind of awkward for a user to select an item and then still see that item inside the list.
It might be a little bit better if whatever the currently selected item is doesn't show up on the list.
So the user understands, oh, I can't select that item again.
Does really make sense to already have the color red selected and selected a second time.
Not a lot of sense there, but definitely one or two improvements we can make.
It would also be nice, of course, if we could close the dropdown.
Let's start to make some these changes in just a moment.