1
00:00:00,050 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:06,800
And when it comes to register, the first thing I want to do is grab this import from the Readme.

3
00:00:06,830 --> 00:00:09,950
Now, of course, if you want, you can type it.

4
00:00:09,980 --> 00:00:14,450
But since I want to save a little bit of time, I'm just going to grab this import.

5
00:00:14,480 --> 00:00:18,070
Now, the other two we should already have in the register.

6
00:00:18,080 --> 00:00:22,070
So first of all, let's navigate to a register page.

7
00:00:22,340 --> 00:00:25,580
Now at the moment we have the link, so let me just replace it.

8
00:00:25,610 --> 00:00:27,860
We're looking for form element.

9
00:00:27,890 --> 00:00:32,450
We're going to use this redirect as well as use navigation.

10
00:00:32,659 --> 00:00:40,610
And pretty much whenever you think of action, think of a function which will allow us to nicely and

11
00:00:40,610 --> 00:00:43,790
smoothly handle the form submission.

12
00:00:43,820 --> 00:00:48,530
Now we have multiple ways how we can set up the action.

13
00:00:48,530 --> 00:00:54,440
And one of the ways is to essentially set it up where we have all of the routes.

14
00:00:54,440 --> 00:00:55,930
So what am I talking about?

15
00:00:55,940 --> 00:00:57,320
I'm going to go to App.js.

16
00:00:57,590 --> 00:01:02,580
Then we're looking for Register page and yes, of course they need to match since we're going to submit

17
00:01:02,580 --> 00:01:04,769
the form in the register page.

18
00:01:04,769 --> 00:01:11,790
I mean, you also need to look for the same page over here and then there is an action property and

19
00:01:11,790 --> 00:01:14,640
we want to set it equal to a function here.

20
00:01:14,730 --> 00:01:20,310
And effectively, every time we'll submit the form, we will invoke this function.

21
00:01:20,310 --> 00:01:26,310
Now, for now, I'm not going to be particularly original and I'm just going to go here with Hello there.

22
00:01:26,340 --> 00:01:29,520
Now, one major thing we need to keep in mind.

23
00:01:29,550 --> 00:01:35,340
We always, always, always, always need to return value from this function.

24
00:01:35,340 --> 00:01:37,560
Now that value can be anything.

25
00:01:37,830 --> 00:01:39,810
It can be an error.

26
00:01:39,840 --> 00:01:42,360
It can be a redirect to a different page.

27
00:01:42,360 --> 00:01:43,560
It can be null.

28
00:01:43,590 --> 00:01:46,740
But if you won't do it, you'll get an error.

29
00:01:46,740 --> 00:01:51,690
And in this case it's going to bubble up to our global error page.

30
00:01:51,690 --> 00:01:56,970
So for starters, let me just go here with the return null and in the process I'll show you the error

31
00:01:57,000 --> 00:01:57,570
as well.

32
00:01:57,570 --> 00:01:58,740
So that's the first step.

33
00:01:58,740 --> 00:02:05,520
We want to set up the function and as a side note, eventually this function will be in our page because.

34
00:02:05,970 --> 00:02:08,009
Is just easier to work that way.

35
00:02:08,100 --> 00:02:15,270
So once we have the action in place, we want to go back to our JSX, back to our return, and we want

36
00:02:15,270 --> 00:02:19,560
to replace the form element with a form component.

37
00:02:19,560 --> 00:02:22,800
So this is a form component coming from React router Dom.

38
00:02:22,830 --> 00:02:29,070
Now, when it comes to CSS, when it comes to the elements that are displayed on the page, it's still

39
00:02:29,070 --> 00:02:30,250
going to be form.

40
00:02:30,270 --> 00:02:36,630
But once we use this form element, we'll be nicely able to use the action.

41
00:02:36,660 --> 00:02:42,930
The first thing we want to pass over here is the method and I'll discuss the other option, the get

42
00:02:42,960 --> 00:02:45,990
one once we get to the search functionality.

43
00:02:46,020 --> 00:02:51,600
For now, since we're going to be sending a post request, yes, essentially we want to tell React router

44
00:02:51,600 --> 00:02:55,110
that and therefore we're going to go over here with method dot post.

45
00:02:55,110 --> 00:02:59,820
So if you don't provide this method, then the default one is going to be get, which we will discuss

46
00:02:59,820 --> 00:03:02,250
later and the same goes for action.

47
00:03:02,250 --> 00:03:06,210
We will use this when we set up delete functionality.

48
00:03:06,210 --> 00:03:08,700
So let's not worry about it right now.

49
00:03:08,790 --> 00:03:17,580
Long story short, whenever you have a post request, make sure that the form component has method equals

50
00:03:17,580 --> 00:03:19,080
to a post.

51
00:03:19,410 --> 00:03:24,180
Now let's save it and let's just navigate to a browser.

52
00:03:25,520 --> 00:03:26,900
Register over here.

53
00:03:26,930 --> 00:03:27,980
Notice, submit.

54
00:03:27,980 --> 00:03:31,670
And if everything is correct, you'll see over here.

55
00:03:31,670 --> 00:03:32,150
This.

56
00:03:32,150 --> 00:03:32,840
Hello there.

57
00:03:32,840 --> 00:03:41,030
And let me right away showcase the error you're going to get if you won't return a value from the action.

58
00:03:41,030 --> 00:03:47,000
Now, I'll just comment out because I will use it and check it out once we click notice how we navigate

59
00:03:47,000 --> 00:03:48,830
to our error page.

60
00:03:48,950 --> 00:03:49,730
Correct.

61
00:03:50,060 --> 00:03:52,160
And it's not 404.

62
00:03:52,430 --> 00:03:56,390
So remember when we were setting up the error page?

63
00:03:56,960 --> 00:03:59,720
We actually set up the condition.

64
00:03:59,720 --> 00:04:00,550
And you know what?

65
00:04:00,560 --> 00:04:04,770
Let me log the error because it will clearly tell you right away.

66
00:04:04,790 --> 00:04:07,880
Notice you defined and for some reason I clicked away.

67
00:04:07,880 --> 00:04:12,590
You define an action for root, but it didn't return anything from action function.

68
00:04:12,590 --> 00:04:17,899
So it nicely tells us, hey listen, you need to return some kind of value.

69
00:04:17,899 --> 00:04:23,120
Again, there are multiple variations and at the end of the day you can simply return null.

70
00:04:23,120 --> 00:04:25,430
But you must, must, must return something.

71
00:04:25,430 --> 00:04:27,710
Otherwise it's going to trigger the error.

72
00:04:27,710 --> 00:04:33,380
And last thing I want to showcase in this video, I mean, yes, you can definitely set up all your.

73
00:04:34,170 --> 00:04:39,000
Actions essentially in the app or where you have all of the routes.

74
00:04:39,000 --> 00:04:46,920
But a quite common approach is to set it up here in the register exported and at least in my opinion,

75
00:04:46,920 --> 00:04:51,410
that way it's easier to troubleshoot and grasp the entire functionality.

76
00:04:51,420 --> 00:04:57,750
So you have your component here and you have a function which will take care of the form submission.

77
00:04:57,750 --> 00:05:03,630
But just keep in mind and don't be surprised if you see actions written in such a way as well.

78
00:05:03,930 --> 00:05:05,910
Essentially, here's what I want to do.

79
00:05:05,940 --> 00:05:12,000
I want to navigate back to a register and I'm just going to come up with the function name.

80
00:05:12,000 --> 00:05:12,360
Now.

81
00:05:12,360 --> 00:05:18,490
I'm usually not particularly original and I just go with export const, and I call this action.

82
00:05:18,510 --> 00:05:23,720
Now I will right away set it up as async for two reasons.

83
00:05:23,730 --> 00:05:29,490
First of all, we'll need await to grab the form data, something that's coming up and also we'll make

84
00:05:29,490 --> 00:05:30,540
the request.

85
00:05:30,570 --> 00:05:34,620
So therefore we want to go here with async.

86
00:05:34,620 --> 00:05:40,710
Let's go here with data just to showcase what you're going to have from React router Dom and let's just

87
00:05:40,710 --> 00:05:42,780
make sure that this is null.

88
00:05:42,840 --> 00:05:49,980
So since we're exporting from the register, we can nicely go to app.jsx X You know what?

89
00:05:49,980 --> 00:05:55,800
Let me also add that console.log, just so you don't think that I'm messing with you or you know what,

90
00:05:55,830 --> 00:05:56,940
we'll log something else.

91
00:05:56,940 --> 00:05:59,740
We will log the data here.

92
00:05:59,760 --> 00:06:01,230
My apologies for detour.

93
00:06:02,200 --> 00:06:03,840
Just thinking here on the fly.

94
00:06:03,850 --> 00:06:09,130
And then since I'm exporting this back in the app.jsx, I want to go where I have the import.

95
00:06:09,130 --> 00:06:16,120
So above the default theme, we want to go with import since it's a named one, of course we want to

96
00:06:16,120 --> 00:06:17,050
go here with action.

97
00:06:17,050 --> 00:06:18,310
But keep in mind that.

98
00:06:19,000 --> 00:06:22,670
We can only have one variable name per file.

99
00:06:22,690 --> 00:06:29,350
So if you're importing ten actions, you'll have to come up with some aliases.

100
00:06:29,350 --> 00:06:36,250
And that's why we'll right away say, Hey, we're importing an action, but the alias is going to be

101
00:06:36,250 --> 00:06:37,720
a register action.

102
00:06:38,650 --> 00:06:39,850
And where is it coming from?

103
00:06:39,850 --> 00:06:42,250
Well, now we want to look for the page.

104
00:06:42,250 --> 00:06:42,640
Correct.

105
00:06:42,640 --> 00:06:49,810
So we're going to go to pages and then we're looking for register and then let's scroll down and where

106
00:06:49,810 --> 00:06:50,590
we have.

107
00:06:51,340 --> 00:06:53,020
Set up the function.

108
00:06:53,350 --> 00:06:55,360
I'll simply go with.

109
00:06:56,060 --> 00:06:57,830
Register action.

110
00:06:57,830 --> 00:07:00,740
So now let's navigate, I guess, to the browser.

111
00:07:01,670 --> 00:07:02,900
Let me refresh.

112
00:07:03,900 --> 00:07:05,700
And check it out once we submit.

113
00:07:05,730 --> 00:07:12,660
Notice by default, we right away get the giant object with a bunch of properties and options.

114
00:07:12,670 --> 00:07:20,820
And of course we will utilize this object in order to collect the values that are being submitted.

115
00:07:20,850 --> 00:07:27,150
And of course, we'll also eventually set up the request back to our server.

116
00:07:27,300 --> 00:07:30,900
And essentially we will create the user.