We are now going to make use of the hook system in react rather than worrying about collapsing or expanding
any of these panels.
Right now, we're just going to try to keep track of what index the user has clicked on and then print
up that index at the very bottom of the screen.
So in other words, if I click on the first element right here, that's at index zero, I should print
zero at the very bottom.
If I click on the second one, I should see one.
And if I click on that one, I should see two.
Now, before I show you the hook system, I want to show you how we would approach this using simple
class based components.
Here's the general idea.
I took the liberty of writing out a little bit of code of an alternate implementation of the accordion
component using a class.
So if we wanted to show the index of the currently selected panel at the very bottom, there are three
key things we would do inside of here.
First, we would initialize our state object at the top and maybe we would have a property inside there
called something like active index.
Second, we would have a helper method that was called whenever a user clicked on a title.
And inside there, we would update our state by calling this dot said state.
And then finally, we would reference our piece of state down here inside the render method with this
dot state, dot active index.
Then total beat.
Three things to remember.
We initialize the value of our state.
We only change that value through set state.
And then finally, we can reference that value at any point time inside of our entire class.
With this DOT state, that active index.
So with that reminder in our head, let's now go over back to our code editor.
We're going to write out some code to use the hook system to do something very similar to what we see
inside of here.
We're going to keep track of the currently selected index and then printed out at the bottom of the
screen.
OK.
So they're gonna write out this code very quickly and then discuss what it is doing.
First off, at the very top, I'm going to get the U.S. state function from the REACT Library.
So we spoke about this function very briefly.
This is a hook.
It gives us access to state inside of a function component.
Next up at the top of my component.
I'm going to write out a line of code that is going to initialize a new piece of state.
I'm going to write out const a set of square brackets.
Inside there, I'll put an active index and set active index.
Then on the other side of those square brackets, I'll put in an equal sign.
All right, out you state and I'll put in No.
Next up, inside of Untitled Click.
We're going to make sure that we update our value of our piece of state.
Anytime a user clicks on the title, I'm going to delete the console log and replace it with set active
index and I'll pass in the index.
And then finally, one last change.
Down at the very bottom are going to expand this d'Hiv.
I'm gonna put an H1 inside their.
And inside of it, I'm going to print out the value of active index.
OK.
Let's say this.
Now we are going to discuss all the code we just wrote in great detail.
But right now, let's just go test this out inside the browser.
So I can now flip back over.
I'll then click on the first panel right here and I see zero up here.
I can click on the second and see one and two.
And as I click on each one, they update to the appropriate index.
All right.
Well, it definitely looks like something is working as expected, but this is a lot of kind of mysterious
code.
So let's pause right here and then discuss exactly what we are doing with every bit of code that we
just added.