Let's go over a quick solution to this exercise.
So step number one, we need to call are you state function at the very top of our component.
So right above this event handler I put together for you.
I'm going to call you State.
And remember, whenever we call you state, we get back to elements inside of an array going to d structure
out those elements and assign them to count and set count.
When I call you states, I will also make sure that I provide a reasonable default value.
So in this case, I started off at zero.
Next up, I'm going to make sure that inside of my J.S. X block right here, right inside, that each
one I'm going to reference that count piece of state that I just created.
The very first time I component is rendered and displayed on the screen, count is gonna have a value
of zero.
And that's why I see it current count zero appear on the right hand side.
Now, whenever a user clicks on that button, the event handler on button click will be invoked.
So inside of on button click I'm going to call Set Count because I want to update my piece of state
local set count.
I'll provide a new value to it.
The new value I want to update my state to will be count plus one.
Like so.
As soon as that count is called, that will also cause my entire component to automatically re render.
When it does so count will be equal to the new value that I just passed in to set count.
Let's go ahead and try this out now.
All right.
Click me.
I see.
One, two, three, four, and so on.
I will also check my solution.
This might take an attempt or two, I've attempted to check the solution a couple of times now and every
now and then it times out hopefully.
OK.
There we go.
Yep.
Looks like the solution is correct.
Hopefully you got this exercise together.
Let's pause here and then continue on our accordion application in just a moment.