1 00:00:00,510 --> 00:00:01,080 All right. 2 00:00:01,080 --> 00:00:04,810 Let's get started with how we can handle forms in React. 3 00:00:04,830 --> 00:00:08,490 So inside my form folder that you created. 4 00:00:08,490 --> 00:00:12,060 All right, so let me put it inside my component like that. 5 00:00:12,060 --> 00:00:14,940 So my form is inside my component. 6 00:00:14,940 --> 00:00:16,440 It's an empty folder. 7 00:00:16,710 --> 00:00:18,660 So let's create the component. 8 00:00:18,660 --> 00:00:20,430 Then we can get started with the steps. 9 00:00:20,430 --> 00:00:30,070 So the component, I would name it as register component or register dot just and let me use the AFC 10 00:00:30,210 --> 00:00:32,400 discover for the component. 11 00:00:32,610 --> 00:00:39,270 So inside that let's have H two and then I would name it as register. 12 00:00:40,000 --> 00:00:40,790 From. 13 00:00:41,410 --> 00:00:44,020 So let's go ahead and mount this component. 14 00:00:44,020 --> 00:00:51,550 So let's go to app and then let's require the component, which is the register component. 15 00:00:51,550 --> 00:00:59,410 The auto import is working for me perfectly, so let me mount or render this component. 16 00:00:59,410 --> 00:01:03,550 So let me move this one and now let me call my component. 17 00:01:03,550 --> 00:01:07,750 I'll start and now I have my register form. 18 00:01:08,110 --> 00:01:14,350 So let's have a look at how we are going to start to handle forms in React. 19 00:01:14,800 --> 00:01:16,690 We have couple of steps. 20 00:01:16,690 --> 00:01:23,170 So step number one is what give initial. 21 00:01:24,580 --> 00:01:26,480 E ne share. 22 00:01:27,590 --> 00:01:32,610 Values for each form input. 23 00:01:33,100 --> 00:01:33,740 Okay. 24 00:01:33,770 --> 00:01:38,560 And next is we are going to create a function called on change function. 25 00:01:38,570 --> 00:01:45,920 So any time we type anything into the input field, this unchanged function is going to be triggered 26 00:01:45,920 --> 00:01:47,750 so they can update this date. 27 00:01:47,900 --> 00:01:50,960 And then lastly, we go ahead and then submit. 28 00:01:51,780 --> 00:01:54,660 So the first step is you need to know. 29 00:01:54,660 --> 00:01:57,390 Sorry, it's supposed to be inside my register component. 30 00:01:58,250 --> 00:01:58,560 Here. 31 00:01:58,560 --> 00:02:01,100 Right there, inside the register. 32 00:02:01,100 --> 00:02:02,000 Sorry, guys. 33 00:02:02,750 --> 00:02:09,350 So one is you need to ask yourself what kind of data that you want to receive from your users. 34 00:02:09,500 --> 00:02:14,720 If registration, you may need the person's email address, full name lists or whatever, depending 35 00:02:14,720 --> 00:02:15,830 how you want it. 36 00:02:16,340 --> 00:02:22,160 So for simplicity's sake, let's make really simple by taking the person email address. 37 00:02:22,190 --> 00:02:26,600 Let's say the password and let's say the first name is good for us, right? 38 00:02:26,600 --> 00:02:32,300 So you bring in the form the same way we do it in a normal ATM in JavaScript. 39 00:02:32,780 --> 00:02:40,860 So inside here you bring our input, our input field like that, let's give it a placeholder of say 40 00:02:41,660 --> 00:02:42,500 full name. 41 00:02:44,300 --> 00:02:44,900 All right. 42 00:02:44,900 --> 00:02:53,060 And next is let's copy this one and then paste it here and then input here is going to be email. 43 00:02:53,060 --> 00:03:00,140 And then the type here, the type of this is going to be as e mail. 44 00:03:02,150 --> 00:03:07,730 And then for the input here, the type is equal to text. 45 00:03:08,480 --> 00:03:13,370 And lastly, we can copy this one and then paste it here. 46 00:03:13,460 --> 00:03:16,100 It's going to be the person's password. 47 00:03:16,640 --> 00:03:20,460 So here is going to be us password. 48 00:03:20,480 --> 00:03:27,800 So if I save it now, I have my input field that I want them to be on the same line. 49 00:03:27,800 --> 00:03:30,440 So let me put everything inside a div. 50 00:03:32,270 --> 00:03:33,350 I want to be on top of it. 51 00:03:33,710 --> 00:03:34,040 Sorry. 52 00:03:34,100 --> 00:03:35,310 Not on the same line. 53 00:03:35,330 --> 00:03:38,480 So our card is one and put it inside, Dave. 54 00:03:39,020 --> 00:03:40,070 So like that. 55 00:03:40,070 --> 00:03:41,540 So let's see the effect now. 56 00:03:41,570 --> 00:03:41,850 Okay. 57 00:03:41,850 --> 00:03:42,570 It is good. 58 00:03:42,590 --> 00:03:44,720 So now the last thing is about a button. 59 00:03:44,720 --> 00:03:46,940 So here a button to submit. 60 00:03:49,660 --> 00:03:54,520 And then, let's say register and then let's give it a type. 61 00:03:55,750 --> 00:03:56,230 Oh. 62 00:03:56,320 --> 00:03:57,310 Submit. 63 00:03:59,270 --> 00:04:01,840 All right, so now we have our form. 64 00:04:01,850 --> 00:04:04,700 So how can we keep track of the states? 65 00:04:04,700 --> 00:04:06,170 That's how you called us. 66 00:04:06,170 --> 00:04:07,730 What control form? 67 00:04:07,940 --> 00:04:14,270 Because you want react to keep track of any change we make inside our component. 68 00:04:14,450 --> 00:04:19,790 So because of that, we need to provide initial state for each of these input field. 69 00:04:20,209 --> 00:04:25,460 So the first one that I'm going to provide is let's keep track of the state. 70 00:04:25,460 --> 00:04:28,190 So we need what is called the use state. 71 00:04:29,590 --> 00:04:30,450 How is that? 72 00:04:30,460 --> 00:04:32,860 So let's remove the comment here and now. 73 00:04:32,860 --> 00:04:41,680 The first one is my you state is going to be the first one I want to keep track is I want to keep track 74 00:04:41,680 --> 00:04:44,980 of the first name, the full name, right. 75 00:04:44,980 --> 00:04:48,790 So here I'll provide initial state of it as an empty. 76 00:04:48,790 --> 00:04:53,710 So let's give, let's return the full name. 77 00:04:55,320 --> 00:05:02,190 And then the set full a function to update the foo name. 78 00:05:02,370 --> 00:05:03,210 Not the first one. 79 00:05:03,210 --> 00:05:04,530 So we need to provide. 80 00:05:05,260 --> 00:05:06,730 Keep track of all this. 81 00:05:06,730 --> 00:05:12,550 We have the full name, email and password so we can copy this one and then paste it and then paste 82 00:05:12,550 --> 00:05:12,940 it. 83 00:05:13,030 --> 00:05:22,720 The next here is going to be the email and then set email and the lastly is going to be password and 84 00:05:22,720 --> 00:05:24,670 then set. 85 00:05:25,760 --> 00:05:27,680 Password like that. 86 00:05:27,680 --> 00:05:35,450 So now we have our initial state, so how can we bind the initial state to this input? 87 00:05:35,450 --> 00:05:39,980 So we need to provide a value to each of this input field. 88 00:05:40,130 --> 00:05:42,980 So here let's provide a value. 89 00:05:43,010 --> 00:05:46,760 The initial value here is from our state, which is the full name. 90 00:05:46,820 --> 00:05:49,310 So you provide full name here. 91 00:05:49,610 --> 00:05:52,040 And the same thing applies to an email. 92 00:05:52,160 --> 00:05:59,690 The initial value here is the state we have, so we provide a value in core email. 93 00:06:00,110 --> 00:06:04,310 And next lastly is going to be the password. 94 00:06:04,310 --> 00:06:07,820 So provide a value equal to password. 95 00:06:08,090 --> 00:06:13,910 So it means that we are binding the input values here to our component. 96 00:06:14,000 --> 00:06:20,090 So in time we call this function and then update our state will be updated automatically. 97 00:06:20,090 --> 00:06:22,220 So we have one way binding. 98 00:06:22,250 --> 00:06:26,810 So now we have the initial state for our form. 99 00:06:26,810 --> 00:06:29,810 How can we type in? 100 00:06:30,230 --> 00:06:32,990 I cannot even type in anything here into the field. 101 00:06:32,990 --> 00:06:34,700 Whatever I do, it doesn't. 102 00:06:34,700 --> 00:06:41,540 So the reason why I couldn't type anything here is that we want to keep track of whatever we type in 103 00:06:41,540 --> 00:06:45,610 here because we provided a value for the for the input field. 104 00:06:45,650 --> 00:06:52,400 It means that if you type anything, we react, want to take what you are typing to update our state, 105 00:06:52,400 --> 00:06:55,100 but we are not calling the on change. 106 00:06:55,100 --> 00:06:58,970 So the on change handler is going to help us to do that. 107 00:06:59,120 --> 00:07:07,580 So in the next video, let's see how we can bind the value we are typing here to our state in the next 108 00:07:07,580 --> 00:07:08,180 video.