1
00:00:00,180 --> 00:00:05,790
All right, and once we have covered we're setting up data separately, might be useful in the long

2
00:00:05,790 --> 00:00:06,000
run.

3
00:00:06,390 --> 00:00:14,370
Now, let's deal with Targo and I'm going to start by cleaning up my app a bit where I really don't

4
00:00:14,370 --> 00:00:15,150
need that sidebar.

5
00:00:15,430 --> 00:00:23,010
I was just for display purposes, essentially demonstration purposes, so I'm just going to delete it.

6
00:00:23,630 --> 00:00:25,850
There's really no use case for it.

7
00:00:26,250 --> 00:00:28,640
Not that I don't have my component anymore.

8
00:00:28,980 --> 00:00:36,750
And of course, let's deal with showing and highlighting the links when we click on a button on your

9
00:00:36,750 --> 00:00:37,830
first approach.

10
00:00:37,830 --> 00:00:39,120
Might be something like this.

11
00:00:39,330 --> 00:00:44,460
Since we have covered it plenty of times, we could set up state value, correct?

12
00:00:44,520 --> 00:00:46,130
I already have used state beautiful.

13
00:00:46,380 --> 00:00:50,820
So I'm going to go with KONE's and then show links, whatever name you want.

14
00:00:51,220 --> 00:00:55,950
Set show links that show links is equal to you state.

15
00:00:56,860 --> 00:01:02,710
Not use the fact sorry, use state and by default, I would want to hide them and then, of course,

16
00:01:02,710 --> 00:01:11,320
once I have my state value, I can just navigate to my button and I'll say on Callick and I'll pass

17
00:01:11,320 --> 00:01:19,030
and wait in line one on what is the state value that is set and not show links.

18
00:01:19,040 --> 00:01:21,550
That is the function that controls the show, links value.

19
00:01:21,850 --> 00:01:26,410
And then remember, in order to toggle, it would just pass and the expansion point.

20
00:01:26,650 --> 00:01:30,380
So that will check the value and get the opposite.

21
00:01:30,730 --> 00:01:33,400
So if it is false, first time or click, it is true.

22
00:01:33,610 --> 00:01:39,660
And then of course we do the whole dance where once it's true, then it's false and all that good stuff.

23
00:01:39,910 --> 00:01:40,710
So we save it.

24
00:01:40,870 --> 00:01:46,980
Now of course we can click on a button, but at the moment we haven't set up any conditional rendering.

25
00:01:47,260 --> 00:01:55,510
So when I could do is just place this div in the conditional render where I say if show links is true

26
00:01:55,720 --> 00:01:57,810
only then randomly div.

27
00:01:58,150 --> 00:01:59,440
So let me select their.

28
00:02:01,260 --> 00:02:07,230
And once place it inside and there it is now, of course, but if they're hidden, once we click, we

29
00:02:07,230 --> 00:02:11,120
can see the links and technically this approach works.

30
00:02:11,400 --> 00:02:18,780
But the problem is if we check the final project, notice how we're doing this smoothly.

31
00:02:19,440 --> 00:02:21,230
So this happens over time.

32
00:02:21,570 --> 00:02:23,550
And here, yes, we're toggling nicely.

33
00:02:23,790 --> 00:02:24,780
Everything's beautiful.

34
00:02:25,080 --> 00:02:30,000
But the changes are happening instantly because essentially we're mounting the component and then on

35
00:02:30,000 --> 00:02:30,430
mounting.

36
00:02:30,810 --> 00:02:31,950
So now it's mounted.

37
00:02:32,250 --> 00:02:33,560
So now we can see it.

38
00:02:33,750 --> 00:02:38,730
And then once we click, then we unmount the component and we cannot do it over time.

39
00:02:39,060 --> 00:02:41,020
So we cannot add animation to it.

40
00:02:41,400 --> 00:02:43,960
That's why we'll have to try a different approach.

41
00:02:44,250 --> 00:02:51,210
So, yes, technically, as far as the basic setup, it is going to work, but we would want to animate

42
00:02:51,570 --> 00:02:52,440
the changes.

43
00:02:52,680 --> 00:02:56,340
That's why we'll take a look at two more approaches.