Our list of items is looking pretty well styled.
The next thing we need to do is figure out how to detect whenever user clicks on one of these titles.
As you guessed, that means that we're just going to wire up an event handler.
We need to add in any on click event handler to detect anytime a user clicks on one of these titles.
To do so, we could go back over to our Ed.
I'm going to find the d'Hiv with the class of title active right here.
I'm going to give myself a little bit of space.
And then on, they're going to add in an unclick prop, so anytime someone clicks on this thing, I'm
going to run a little arrow function and inside there I'll do a console log of title clicked.
And then I would love to display the index of the item that was clicked on.
Remember, we're trying to keep track of which index should be expanded at any given time.
This is index zero because it represents the first element inside of our array, index one, an index
to make sure that we also console log the index of the title that was just clicked.
We can receive the index argument.
That is the second argument to the map function.
We can take that index variable and add it into the very end of that console log.
I'm going to say that.
Let's do a quick test.
I'll open up my console and then I will click on some these titles.
And as soon as I do so, I see title click zero one into.
All right.
Well, simple enough.
Nothing too crazy so far.
Now, here's one thing I won't mention really quickly.
It's entirely possible that this unclick callback right here is going to eventually have a good amount
of code inside of it.
Who knows?
Maybe we need to write in a lot of code to work with this Hooke's state system.
I don't know yet, but it might be a little bit messy to add in all the code right here directly in
line.
So I think would be really nice if we could put together some helper function and then write out that
helper function somewhere else inside this file.
Now, if we had done this inside of a class based component, that would be really easy to do.
Let me show you a quick example of what we might do if we had a class based component.
We could do something like class accordion.
Extends components.
And then maybe inside this thing would have a render method that produced our ASX.
And then if we wanted to add in that helper method, we could add in something like on Idol.
Click.
And then inside of here, we could do a console log of title was linked.
So as we discussed many times, one of the nice things about a Class-Based component is it's really
easy to organize your code.
If you ever need to add in some kind of helper method, well, you just added in.
It's really easy to give it a very appropriate name.
That makes it clear to other engineers what that method is doing for you inside of a function component.
That is a little bit more challenging.
Let me show you how we would approach adding in some kind of helper function or helper method to a function
component.
I'm gonna delete that little example.
Then at the very top of accordion, I'm going to define a new helper function and assign it to a variable
called on Idol Click.
I'm going to expect that this is going to receive the index of the item that was just clicked on and
then inside there will do a console log as well of title clicked and then print out the index.
So I now want to call this function right here.
Anytime a user clicks on that div.
So now I'm still going to leave in this aero function right here and I'm going to replace that console
log.
And call on title click and pass through the index, though, on Idol, click and pass through the index
like so.
Why do we still have the aero function?
Well, remember, if we just write out something like this.
Then on Title Click is going to be invoked the instant that our list of items is rendered.
As a matter of fact, we can even verify that if we save the file as it is right now.
Flip back over and the instant we refresh the page, we see title click zero one into.
We do not want to run that callback function the instant our company is rendered.
Instead, we want to call it at some point in time the future.
And to do that, we have to wrap it with an arrow function.
Now, whenever that era function is executed, we run on title click.
And the reason I'm making such a big deal about this entire helper method right here is that it's gonna
be a little bit nasty and your components are gonna end up being a little cluttered.
When you write out all these helper functions inside the body of a function component, you don't get
that kind of nice separation of code that we used to have back inside of a class based component.
So this is just something I want you to be aware of a little bit harder to write, a very nicely organized
component.
When you are using a function component, that's just the reality.
All right.
Let's save this with the arrow function in there.
And then do another quick test.
Well, I'll click on these titles, and yet I still see those console logs.
OK.
So this looks pretty good.
Now, as I mentioned, we need to make use of the Hooke's state system to somehow keep track of which
of these elements should be expanded and collapsed.
Let's take a pause right here and then start to understand the state system with hooks in the next video.