1 00:00:01,890 --> 00:00:03,810 We come back this way. 2 00:00:03,810 --> 00:00:07,890 We left by having initial state for our form. 3 00:00:08,310 --> 00:00:10,620 Let's try to do what is called binding. 4 00:00:10,620 --> 00:00:18,870 Meaning whatever I type in here into my form, I want react to update it for me automatically. 5 00:00:18,900 --> 00:00:21,930 So you're going to create a function to do that? 6 00:00:22,020 --> 00:00:25,050 I mean, call that function as an on change. 7 00:00:25,230 --> 00:00:29,220 So you're going to create a function for each of these input fields. 8 00:00:29,400 --> 00:00:33,750 So the first one is on the on change food name. 9 00:00:33,960 --> 00:00:36,960 So the function goes like this. 10 00:00:37,320 --> 00:00:38,730 So const. 11 00:00:41,160 --> 00:00:42,600 On change. 12 00:00:44,070 --> 00:00:47,910 Full name, meaning the full name import field. 13 00:00:49,750 --> 00:00:51,970 Going to be my arrow function. 14 00:00:52,330 --> 00:00:57,040 And now for each of this one, we have access to the event. 15 00:00:58,360 --> 00:00:59,580 On the input field. 16 00:00:59,590 --> 00:01:03,340 So if you try to console that, log the event. 17 00:01:04,310 --> 00:01:10,210 So the next step is we need to bind this on change function here to the input. 18 00:01:10,220 --> 00:01:19,340 So now let's provide the event here called on change and now we pass in our handler the function that 19 00:01:19,340 --> 00:01:20,070 is unchanged. 20 00:01:20,120 --> 00:01:20,760 Funny. 21 00:01:21,050 --> 00:01:26,120 So with this one, let's go ahead and try if we can type in anything here. 22 00:01:26,120 --> 00:01:28,100 And I believe we cannot do it. 23 00:01:28,100 --> 00:01:30,800 So let's see if I type in anything here. 24 00:01:30,800 --> 00:01:31,430 You see that? 25 00:01:31,430 --> 00:01:32,990 I don't see the effect. 26 00:01:32,990 --> 00:01:34,150 I cannot type anything. 27 00:01:34,160 --> 00:01:34,970 Why? 28 00:01:35,060 --> 00:01:43,250 Because react one to call the set full name value to update the input field. 29 00:01:43,460 --> 00:01:54,440 So inside our own change handler here, we can now call set full name so we can set full name to whatever. 30 00:01:54,440 --> 00:02:02,600 Let's say I'm here now we have the input of full name, value of full name inside that. 31 00:02:02,600 --> 00:02:10,699 So let's try if I type anything here now I get ima whatever I type in here I get ima simply because 32 00:02:10,970 --> 00:02:18,950 when I type in anything into this input field, it's looking at a function to update this particular 33 00:02:18,950 --> 00:02:26,120 input and which is set full name and what are the set filename name is doing is just replacing the initial 34 00:02:26,120 --> 00:02:29,590 value of my full name from empty string to IMA. 35 00:02:29,600 --> 00:02:33,800 So on change means whatever I type in here I still have ima. 36 00:02:33,980 --> 00:02:38,600 So to make it more dynamic right, we need to get whatever is typing here. 37 00:02:38,600 --> 00:02:39,890 So how can we get that? 38 00:02:39,920 --> 00:02:44,750 That is why we have this event method here, prop object here. 39 00:02:44,750 --> 00:02:48,020 So let's check our console as soon as I do that. 40 00:02:48,020 --> 00:02:50,210 Let's see, let's refresh it. 41 00:02:50,210 --> 00:02:52,490 And now we have this error. 42 00:02:52,490 --> 00:02:54,530 Don't worry, you will face very soon. 43 00:02:54,770 --> 00:02:59,960 So if I type anything here we see that I get the event being triggered, which is this. 44 00:03:00,320 --> 00:03:06,140 And what I want is my target value to give me the actual value. 45 00:03:06,290 --> 00:03:10,370 So now instead of this ima okay let's try it here. 46 00:03:10,490 --> 00:03:12,770 Event dot target. 47 00:03:14,090 --> 00:03:15,440 Dot value. 48 00:03:16,180 --> 00:03:16,770 Check it out. 49 00:03:16,780 --> 00:03:18,370 So now let me refresh it. 50 00:03:18,490 --> 00:03:20,260 And now let me tap anything here. 51 00:03:20,260 --> 00:03:20,740 You see that? 52 00:03:20,740 --> 00:03:24,100 I get cue for the first one and then the preceding ones. 53 00:03:24,100 --> 00:03:25,300 I get that. 54 00:03:25,810 --> 00:03:29,450 Okay, so now I'm going to replace this static test. 55 00:03:29,450 --> 00:03:32,740 We provide for email with what you are getting inside. 56 00:03:32,740 --> 00:03:34,720 So now let's have a look. 57 00:03:35,140 --> 00:03:38,620 If I save it now, let's have a look. 58 00:03:40,240 --> 00:03:45,210 If I type in anything here now, I can type in anything inside. 59 00:03:45,220 --> 00:03:51,880 So let's do the same thing for the the email and then the password so we can copy this one. 60 00:03:52,210 --> 00:03:57,550 And then let's comment here and call it as on change. 61 00:03:59,010 --> 00:03:59,910 On. 62 00:04:01,240 --> 00:04:02,650 Change few name. 63 00:04:04,420 --> 00:04:07,690 And next week I'm going to be the UN change. 64 00:04:09,040 --> 00:04:09,730 Emile. 65 00:04:09,760 --> 00:04:10,440 So let's do it. 66 00:04:10,450 --> 00:04:10,780 So. 67 00:04:10,800 --> 00:04:13,120 Cast on change. 68 00:04:13,600 --> 00:04:14,470 Emile. 69 00:04:15,590 --> 00:04:16,910 Is equal to. 70 00:04:16,940 --> 00:04:22,040 I have access to my events and now I'll call my function set email. 71 00:04:22,070 --> 00:04:27,380 Then I'll pass in event your target dot value as we did before. 72 00:04:27,620 --> 00:04:29,860 So let's do the same thing for the password. 73 00:04:29,870 --> 00:04:31,160 So let's copy this one. 74 00:04:31,160 --> 00:04:35,290 And then on change password like that. 75 00:04:35,300 --> 00:04:38,780 Change the name here to on change password. 76 00:04:41,470 --> 00:04:43,180 And next year that is it. 77 00:04:43,180 --> 00:04:45,340 So let's bind to the individual ones. 78 00:04:45,490 --> 00:04:49,030 So for the first one for the IMO is unchanged. 79 00:04:49,660 --> 00:04:49,990 Of. 80 00:04:52,080 --> 00:04:56,730 On change and now pass in the on change email. 81 00:04:57,090 --> 00:05:00,630 Next one is on change. 82 00:05:00,870 --> 00:05:04,060 Going to be on change password. 83 00:05:04,080 --> 00:05:05,370 Now everything. 84 00:05:05,400 --> 00:05:06,570 There'll be no error. 85 00:05:07,540 --> 00:05:09,040 Okay, so let's save it. 86 00:05:09,370 --> 00:05:14,800 And now there is no error because we are binding our input to our state. 87 00:05:14,890 --> 00:05:20,040 So let's say this is going to be Ben and then email as Ben adds. 88 00:05:21,560 --> 00:05:29,170 Then at at gmail.com and then one, two, three, four, five or the parser are working. 89 00:05:29,230 --> 00:05:31,370 Uh uh. 90 00:05:32,490 --> 00:05:36,330 Maybe I'm passing the same value to you have the. 91 00:05:37,520 --> 00:05:38,330 Oh, sorry. 92 00:05:38,330 --> 00:05:41,810 I need to change this one to set password. 93 00:05:43,040 --> 00:05:46,260 Set password and then set email. 94 00:05:46,280 --> 00:05:46,790 Yeah. 95 00:05:47,060 --> 00:05:48,290 So let's try again. 96 00:05:48,290 --> 00:05:55,550 And now let's say this ban and then then at gmail.com and then password. 97 00:05:55,550 --> 00:05:56,930 One, two, three, four, five. 98 00:05:56,960 --> 00:06:03,590 Next is when I click on this one, you see that I get this refresh and react. 99 00:06:03,590 --> 00:06:10,310 Want to have a control over the data that you are typing to avoid refreshing. 100 00:06:10,520 --> 00:06:12,110 So let's avoid this. 101 00:06:12,110 --> 00:06:17,510 How to prevent refresh upon form submit. 102 00:06:17,630 --> 00:06:18,620 All right, great.