All right, and once we have covered we're setting up data separately, might be useful in the long
run.
Now, let's deal with Targo and I'm going to start by cleaning up my app a bit where I really don't
need that sidebar.
I was just for display purposes, essentially demonstration purposes, so I'm just going to delete it.
There's really no use case for it.
Not that I don't have my component anymore.
And of course, let's deal with showing and highlighting the links when we click on a button on your
first approach.
Might be something like this.
Since we have covered it plenty of times, we could set up state value, correct?
I already have used state beautiful.
So I'm going to go with KONE's and then show links, whatever name you want.
Set show links that show links is equal to you state.
Not use the fact sorry, use state and by default, I would want to hide them and then, of course,
once I have my state value, I can just navigate to my button and I'll say on Callick and I'll pass
and wait in line one on what is the state value that is set and not show links.
That is the function that controls the show, links value.
And then remember, in order to toggle, it would just pass and the expansion point.
So that will check the value and get the opposite.
So if it is false, first time or click, it is true.
And then of course we do the whole dance where once it's true, then it's false and all that good stuff.
So we save it.
Now of course we can click on a button, but at the moment we haven't set up any conditional rendering.
So when I could do is just place this div in the conditional render where I say if show links is true
only then randomly div.
So let me select their.
And once place it inside and there it is now, of course, but if they're hidden, once we click, we
can see the links and technically this approach works.
But the problem is if we check the final project, notice how we're doing this smoothly.
So this happens over time.
And here, yes, we're toggling nicely.
Everything's beautiful.
But the changes are happening instantly because essentially we're mounting the component and then on
mounting.
So now it's mounted.
So now we can see it.
And then once we click, then we unmount the component and we cannot do it over time.
So we cannot add animation to it.
That's why we'll have to try a different approach.
So, yes, technically, as far as the basic setup, it is going to work, but we would want to animate
the changes.
That's why we'll take a look at two more approaches.