Now you've got the basics of use state down.
Let's go ahead and finish up this accordion example.
We've got this active index variable that is going to be changing over time.
Whenever a user clicks on a title, active index will be updated and we will re render this entire component.
So how are you going to actually expand one these items or shrink it?
Well, it all comes down to the existence of the active class name on this div right here inside of
our list.
And the active class name right here, the active class names.
So I can delete those really quickly, control whether or not an individual item will be expanded.
So we need to make sure that whenever we are iterating over our list of items right here, we need to
take a look at the index that we are currently iterating over and then compare it to the active index
piece of state.
If they are equal to each other, then we will want to add the class name of active to this day right
here and that div right there.
So that's our general goal to implement this.
How about we put together.
A little expression right here to decide whether or not we should apply the active class name, but
declare a new variable called active.
And I will check to see if the index of the item that we are currently iterating over.
Is equal to the active index piece of state.
If it is, then I'm going to assign a value of active to this variable, otherwise I will assign empty
string to it.
Now we can simply take this active variable and interpolate it or essentially join it together into
this class name.
Do so.
We're going to wrap this with some curly braces because we need to write out a little JavaScript expression
inside of your.
Now, we could simply join on.
With plus active and put a space in there, or alternatively, we could use string templating, which
is probably a little bit preferable, though, for that, let's delete everything inside there and replace
it with back ticks.
We can put in.
Title, then dollar sign, curly braces active.
And then we'll repeat the same thing down here for content as well.
Curly braces back, ticks content.
Dollar sign.
Curly braces active.
Finally, I think we don't really need the H one down inside the render statement anymore or this J.S.
X block cell delete that each one.
All right.
Let's save this and do a quick test.
So now, by default, all these options are kind of great out until a mouse over them.
If I then click on one, it expands it.
I can click on another and another.
Only one item can be expanded at a time.
So as soon as I click on another one, the previously expanded one collapses.
All right.
Well, simple little component.
That is pretty much it.
That is our accordion.
So we've seen a very basic example of you states now, as I mentioned, the application we're working
on here is a little bit larger than the accordion.
So let's take a pause here.
We'll come back to the next video.
We're gonna start to take a look at another component that we're going to build into this application
and understand how we're going to use some additional hooks to put it together.