1
00:00:00,510 --> 00:00:02,530
Are desperate component is looking pretty good.

2
00:00:02,550 --> 00:00:04,530
But there's one lesson we have to take care of.

3
00:00:04,620 --> 00:00:09,410
You'll notice that at present we have a normal vanilla anchor tag inside of here.

4
00:00:09,720 --> 00:00:14,970
If we flip over to our apt J.S. component you'll recognize that we still are making use of this serve

5
00:00:14,970 --> 00:00:16,100
a new component.

6
00:00:16,140 --> 00:00:20,940
That's just a dummy component but we have wired it up to the re-act router side of our application.

7
00:00:20,940 --> 00:00:25,800
And so we have a defined route inside of your of slash surveys slash new.

8
00:00:25,860 --> 00:00:31,320
And if we go there we'll show these serve a new component which in theory is going to be used to show

9
00:00:31,320 --> 00:00:33,160
some form to our user.

10
00:00:33,270 --> 00:00:39,030
So we want to make sure that whenever a user clicks on that add button the big red button they get redirected

11
00:00:39,060 --> 00:00:43,460
over to this route right here and they start to see the form on the screen.

12
00:00:43,800 --> 00:00:48,600
So in practice this is a pretty straight easy pretty straightforward easy refactor rather than showing

13
00:00:48,600 --> 00:00:49,260
anchor tag.

14
00:00:49,260 --> 00:00:52,760
We want to use a linked tag from the re-act router library.

15
00:00:52,830 --> 00:00:57,960
So let's import it out to talk and make use of it inside of this component at the top.

16
00:00:57,960 --> 00:01:02,940
We will import link from re-act router dom.

17
00:01:03,030 --> 00:01:06,490
And don't forget that re-act router comes in a couple of different flavors.

18
00:01:06,600 --> 00:01:11,940
We are in particular using re-act router dom because we are working inside the browser.

19
00:01:12,570 --> 00:01:14,580
Now I'll find my anchor tag.

20
00:01:14,580 --> 00:01:21,790
I will replace the opening a with link and I would place the closing line with link as well.

21
00:01:22,290 --> 00:01:23,760
So we've got the class name here.

22
00:01:23,820 --> 00:01:29,520
We need to also make sure that we have a two property that specifies where the user should be routed

23
00:01:29,520 --> 00:01:31,590
to whenever they click on the button.

24
00:01:31,620 --> 00:01:38,580
So we'll add on to make sure that if anyone clicks on this thing we will send them over to the surveys

25
00:01:38,640 --> 00:01:40,730
slash new route.

26
00:01:40,770 --> 00:01:45,080
So slash surveys slash new like so.

27
00:01:45,600 --> 00:01:48,400
OK time to test this thing out.

28
00:01:48,450 --> 00:01:50,100
A flip back over to my browser.

29
00:01:50,160 --> 00:01:51,390
Wait for the refresh.

30
00:01:51,390 --> 00:01:52,520
There it is.

31
00:01:52,570 --> 00:01:54,440
Now I click on the Add button.

32
00:01:54,750 --> 00:01:59,250
We get the survey new component appear on the screen and so it looks like this is definitely working

33
00:01:59,250 --> 00:02:00,110
for right now.

34
00:02:00,480 --> 00:02:00,820
OK.

35
00:02:00,840 --> 00:02:04,020
So that's pretty much it with getting our dashboard working.

36
00:02:04,140 --> 00:02:09,170
We can now go back and forth as we freely wish between these two screens.

37
00:02:09,270 --> 00:02:10,730
So let's continue the next section.

38
00:02:10,780 --> 00:02:16,290
We're going to start talking a lot more about these survey new component and exactly how we are going

39
00:02:16,290 --> 00:02:18,290
to honor this form up to our application.

40
00:02:18,420 --> 00:02:20,060
So I'll see you in just a minute.