1 00:00:07,960 --> 00:00:08,950 In this video. 2 00:00:08,950 --> 00:00:10,930 Let's work on the registration. 3 00:00:10,930 --> 00:00:14,380 So first of all, we need to handle the form data. 4 00:00:14,590 --> 00:00:21,550 Well, you can give yourself a challenge by trying how you can handle the forms, and after that, you 5 00:00:21,550 --> 00:00:24,910 can go ahead and create an action for registration. 6 00:00:25,270 --> 00:00:25,750 All right. 7 00:00:25,750 --> 00:00:27,820 So let's see how I'm going to do this one. 8 00:00:27,820 --> 00:00:28,270 Perfect. 9 00:00:28,270 --> 00:00:32,619 So the way we did for the log in, we are going to do the same thing. 10 00:00:32,619 --> 00:00:39,610 So let's locate the register component and forms and register and here we go. 11 00:00:39,850 --> 00:00:45,940 So we are not going to use different on change handlers, but instead we are going to use one group 12 00:00:46,090 --> 00:00:51,520 method go on change for all the input field as we did for log in. 13 00:00:51,910 --> 00:00:58,120 So here I need to keep track about the state, so I need to bring in the new state. 14 00:00:58,570 --> 00:01:04,120 So for this one we have two properties that the foo name, the email and the password. 15 00:01:04,120 --> 00:01:14,410 So here we go const and I'm going to assign the data to a variable called form data and then set for 16 00:01:14,830 --> 00:01:23,800 data the way we did when we are logging in pass in object with this property is foo name by default 17 00:01:23,800 --> 00:01:32,290 is empty and then the email of the user and email by default is also empty. 18 00:01:32,290 --> 00:01:34,210 And then the password. 19 00:01:34,720 --> 00:01:41,470 Well, you can use a third party package like for me to get this one done, but let's do it manually 20 00:01:41,470 --> 00:01:42,520 by ourself. 21 00:01:42,910 --> 00:01:53,080 So let me label here by saying form data and down here let's structure the form data. 22 00:01:53,200 --> 00:02:01,750 It goes like this, this structure and comes from the form data here. 23 00:02:02,200 --> 00:02:09,160 And I need the foo name, the email and then the password. 24 00:02:10,870 --> 00:02:11,470 Great. 25 00:02:11,800 --> 00:02:15,370 So next step is that let's create the own change handler. 26 00:02:19,800 --> 00:02:31,130 So cost on change input is equal to I have access to the event and here we go. 27 00:02:31,350 --> 00:02:39,000 So in here I would take the form data and then I'll pass in the initial state form data here. 28 00:02:40,200 --> 00:02:43,800 Then this agreement is going to be the properties I'm going to use to update. 29 00:02:43,800 --> 00:02:46,860 I'm going to use array with event or target. 30 00:02:47,730 --> 00:02:53,930 So in case you are not familiar with what I'm doing, I advise you to watch a section for logging in 31 00:02:53,980 --> 00:02:54,680 recorder part. 32 00:02:54,690 --> 00:03:03,480 I took my time to explain this concept, so now the value is going to be as event or target dot value. 33 00:03:03,720 --> 00:03:06,090 Now I'm done with it unchanged. 34 00:03:06,390 --> 00:03:09,120 Then this one going to be the handle submit. 35 00:03:11,730 --> 00:03:12,230 Great. 36 00:03:12,240 --> 00:03:15,960 So I'm going to be cast on submit. 37 00:03:18,810 --> 00:03:19,530 Handler. 38 00:03:20,220 --> 00:03:26,270 And for this one too, I have access to the events and inside let's prevent a default. 39 00:03:27,180 --> 00:03:34,440 I start and lastly, let's console.log the entire form data and let's see if everything will be all 40 00:03:34,440 --> 00:03:34,920 right. 41 00:03:35,100 --> 00:03:41,720 So next step is that because we are using this format, unless we use a name attribute on all the inputs. 42 00:03:41,730 --> 00:03:44,540 So here we go on the email. 43 00:03:44,550 --> 00:03:53,910 I want to provide the value for binding and going to be as email and then the change is equal to the 44 00:03:54,210 --> 00:04:01,640 unchanged input and then the name attribute is going to be email. 45 00:04:02,280 --> 00:04:03,930 So I can copy this one. 46 00:04:03,930 --> 00:04:07,410 And now the rest of the input that is for the foo name. 47 00:04:07,830 --> 00:04:16,310 Let's put it here and change this one to foo name and then the email to the foo name and for the own 48 00:04:16,350 --> 00:04:18,089 change it remains the same. 49 00:04:18,420 --> 00:04:20,100 Likewise the password. 50 00:04:20,100 --> 00:04:24,240 Let's change this one to password and perfect. 51 00:04:24,240 --> 00:04:31,470 So now make sure that you change the a link to button and not the h ref. 52 00:04:31,470 --> 00:04:34,770 But instead can it be of type or submit. 53 00:04:35,400 --> 00:04:40,320 Now we are done with the binding, so here we can provide a link. 54 00:04:40,350 --> 00:04:43,750 If the person have an account, then click here to sign in. 55 00:04:43,770 --> 00:04:51,960 So let's bring in the link component from React Prompt Adam and let's remove the A link and replaced 56 00:04:51,960 --> 00:04:58,950 with the link tag here where I place it at one place it's supposed to be on this one. 57 00:04:59,280 --> 00:05:05,820 The link here where I can remove this one because I have the register here already. 58 00:05:05,940 --> 00:05:11,490 So here let's provide the two attribute and then first last log in. 59 00:05:12,270 --> 00:05:13,910 Now, moment of truth. 60 00:05:13,920 --> 00:05:15,030 Let's check it out. 61 00:05:15,210 --> 00:05:20,790 When I click on this one, we can see that it took me to sign in and then sign up. 62 00:05:20,790 --> 00:05:22,650 I need to provide a link for that. 63 00:05:22,660 --> 00:05:23,850 So register. 64 00:05:23,880 --> 00:05:26,810 Let's open the console and let's check it out. 65 00:05:26,820 --> 00:05:34,080 As soon as I submit with any value here then provide with something like Gmail. 66 00:05:34,110 --> 00:05:36,330 Otherwise I cannot submit. 67 00:05:36,330 --> 00:05:37,200 And let's see. 68 00:05:38,110 --> 00:05:40,450 Well, the full name too is email. 69 00:05:40,490 --> 00:05:42,760 Then I think we made some mistake here. 70 00:05:43,240 --> 00:05:47,170 The full name type is not email, but instead. 71 00:05:47,170 --> 00:05:48,340 Can it be a text? 72 00:05:48,730 --> 00:05:49,270 Yeah. 73 00:05:49,690 --> 00:05:50,400 Perfect. 74 00:05:50,410 --> 00:05:52,840 So let's send again. 75 00:05:52,840 --> 00:05:54,190 I got a refresh. 76 00:05:55,240 --> 00:05:58,190 Maybe I'm not binding the unsub me to the form. 77 00:05:58,210 --> 00:05:58,750 Yeah. 78 00:05:58,900 --> 00:06:02,770 So here, let's remove the action and going to be as one. 79 00:06:02,770 --> 00:06:03,850 Submit it. 80 00:06:03,850 --> 00:06:06,880 Going to be as on submit handler. 81 00:06:09,770 --> 00:06:10,640 Let's see. 82 00:06:10,970 --> 00:06:12,380 Let's clear the console. 83 00:06:12,380 --> 00:06:17,630 And now let's enter some email and now full name and some password. 84 00:06:17,630 --> 00:06:18,440 And let's see. 85 00:06:19,040 --> 00:06:21,590 I can see that I go back the value. 86 00:06:21,770 --> 00:06:24,890 So what about if a user tried to submit an empty field? 87 00:06:24,890 --> 00:06:26,480 Let's try to prevent that. 88 00:06:26,480 --> 00:06:28,070 We're using the elect. 89 00:06:28,430 --> 00:06:32,120 So here let's check before submitting. 90 00:06:32,360 --> 00:06:41,330 If there is no email or there is no password or there is no full name. 91 00:06:44,300 --> 00:06:58,760 Then we can elect and say that please provide or details you provided or details. 92 00:06:59,470 --> 00:06:59,920 Yeah. 93 00:06:59,930 --> 00:07:02,150 So now let's see when I click on this one. 94 00:07:02,150 --> 00:07:03,420 Now I got this one. 95 00:07:03,440 --> 00:07:03,980 Okay. 96 00:07:04,220 --> 00:07:12,620 But when I click okay, you can see that it's to call it so we can return from here as that return. 97 00:07:13,010 --> 00:07:13,400 Perfect. 98 00:07:13,400 --> 00:07:16,490 So now we are done with the form handling. 99 00:07:16,520 --> 00:07:20,510 What has left is about creating the action to dispatch. 100 00:07:20,540 --> 00:07:22,910 All right, let's get into that in this video.