1 00:00:00,180 --> 00:00:00,810 Nicely done. 2 00:00:01,020 --> 00:00:11,070 Hopefully we are clear on the basics and let's see how we can connect our inputs to the state values, 3 00:00:11,580 --> 00:00:14,610 because at the moment, yeah, we can prevent a default. 4 00:00:14,980 --> 00:00:17,220 We can control the world. 5 00:00:17,220 --> 00:00:27,420 But of course, what I would want is to access the data that is inside input as I'm typing or as I'm 6 00:00:27,420 --> 00:00:27,930 submitting. 7 00:00:28,530 --> 00:00:33,090 And the way we do that and react, we set up state values. 8 00:00:33,420 --> 00:00:35,640 So again, we'll use use state. 9 00:00:36,630 --> 00:00:44,520 And then only to add to attributes all the input value that will reference the estate value and then 10 00:00:44,520 --> 00:00:52,500 on change and on change, event listener will fire the callback function each and every time we type 11 00:00:52,500 --> 00:00:54,380 something in the input. 12 00:00:54,570 --> 00:00:57,930 And I guess let's start by setting up our state values. 13 00:00:58,850 --> 00:01:04,610 So here I'm going to go with Konstantine first name and then I'll say set. 14 00:01:07,300 --> 00:01:15,370 First name, and that is equal to my state, and then by default, it is just going to be an empty string. 15 00:01:15,700 --> 00:01:21,940 I'll copy and paste and of course, I'll do the same thing with email where it's going to be an email 16 00:01:21,940 --> 00:01:23,980 and then send email. 17 00:01:24,190 --> 00:01:28,580 And again, by default, it is going to be a empty string. 18 00:01:28,990 --> 00:01:34,150 So now what I would want is to head to my inputs. 19 00:01:34,360 --> 00:01:38,280 And then, like I said, we have to add two attributes. 20 00:01:38,410 --> 00:01:46,660 One is going to be value and the second one will be on Chege event listener, where we'll set up our 21 00:01:46,660 --> 00:01:47,510 callback function. 22 00:01:48,280 --> 00:01:54,080 So here, let's write value and which value would want a reference from the state? 23 00:01:54,520 --> 00:01:58,540 Well, I guess most sense would make a first name, correct. 24 00:01:58,870 --> 00:02:06,910 So again, I'm just referencing here the state value and I'll do the same thing with my email. 25 00:02:07,360 --> 00:02:12,970 So again, we go with value and then we're looking at which state value would want to reference. 26 00:02:13,330 --> 00:02:16,050 And the moment you do that, you'll notice something interesting. 27 00:02:16,060 --> 00:02:23,200 First of all, there's going to be a big fat error because React will complain or maybe more specifically 28 00:02:23,200 --> 00:02:23,710 warning. 29 00:02:24,040 --> 00:02:28,150 Where we react will complain that I provided value prop. 30 00:02:28,510 --> 00:02:32,400 However, I missed out on the on change handler. 31 00:02:32,740 --> 00:02:36,920 The more you react with the on change handler a little bit later. 32 00:02:37,150 --> 00:02:42,130 Now I just want you to understand that notice how you're typing and nothing is happening. 33 00:02:42,520 --> 00:02:43,700 Why nothing is happening. 34 00:02:43,720 --> 00:02:50,170 Well, because we connected our forms meaning our inputs to the state. 35 00:02:51,070 --> 00:02:56,900 So since both of my state values are empty strengths, they all the time will stay like this. 36 00:02:57,130 --> 00:03:03,070 Now, of course, if I say hello world, of course in my name one, I will have that whole world. 37 00:03:03,520 --> 00:03:12,220 Just keep in mind, of course, now we have connected those inputs to the state value and the last thing 38 00:03:12,220 --> 00:03:15,910 in a puzzle is to set up that on change. 39 00:03:15,910 --> 00:03:23,920 So each and every time we will type something in a form will fire that function and within that function 40 00:03:24,190 --> 00:03:31,480 we will set up of this state value and that in return you will right away see it in the form as well. 41 00:03:31,780 --> 00:03:38,800 Just hopefully this is clear where now the value in the form depends on the state value. 42 00:03:39,190 --> 00:03:45,640 And since it is an empty string, that's why you can type all day long and nothing won't change in the 43 00:03:45,640 --> 00:03:45,950 form. 44 00:03:46,360 --> 00:03:51,760 And with that said, now let's set up our own change handler. 45 00:03:52,090 --> 00:03:53,860 So we go here with On Change. 46 00:03:54,160 --> 00:04:01,700 And again, we can set up a reference, meaning we can set up a separate function and just referenced 47 00:04:01,700 --> 00:04:04,240 it, or we can set up the in line one. 48 00:04:04,390 --> 00:04:10,450 Now, since this is already fifth or sixth example of in line and reference, I'm not going to set up 49 00:04:10,750 --> 00:04:12,070 two separate scenarios. 50 00:04:12,310 --> 00:04:18,700 I'll just do the in line where we'll have to pass in our arrow function first, because again we will 51 00:04:18,700 --> 00:04:22,480 be invoking and now we're go set first. 52 00:04:22,540 --> 00:04:25,240 And so here comes the interesting part. 53 00:04:25,660 --> 00:04:31,270 Remember when we were submitting the form, we had access to the event object. 54 00:04:31,660 --> 00:04:37,720 And in this case, the method that we're looking for on the event object was prevent default. 55 00:04:38,740 --> 00:04:45,610 Now, with on change, we also would want to access the event object, however, in this case, what 56 00:04:45,610 --> 00:04:50,250 we're looking for is the event target value. 57 00:04:50,440 --> 00:04:57,190 So the same deal like we had with Handelsman where we had access to the event object, same works with 58 00:04:57,190 --> 00:05:03,640 on change, where again, we can access the event object, or in this case, what we're looking for 59 00:05:03,970 --> 00:05:08,570 is the event target and more specifically, value. 60 00:05:08,920 --> 00:05:14,670 So that is going to give us whatever is typed in the actual input. 61 00:05:15,010 --> 00:05:20,530 So I'm going to go here with event of Target and then we're looking for the value. 62 00:05:20,840 --> 00:05:27,520 So now what you'll notice with the first one as you start typing, actually, the values are displayed 63 00:05:27,790 --> 00:05:29,470 on what is even more interesting. 64 00:05:29,980 --> 00:05:35,350 If you go to the components, you'll notice that at the moment there's nothing there. 65 00:05:35,560 --> 00:05:36,610 Yeah, that is true. 66 00:05:36,760 --> 00:05:38,760 My control inputs are I'm sorry, in here. 67 00:05:39,040 --> 00:05:46,270 So now we have the state value and as you start typing notice the state value also changes. 68 00:05:46,660 --> 00:05:54,460 So we're affecting that in two places because we have connected our form each and every time I type 69 00:05:54,460 --> 00:05:59,680 something in the form the on change function fires. 70 00:05:59,980 --> 00:06:06,220 And then within that function I have said first name and then I'm controlling of the state. 71 00:06:06,760 --> 00:06:09,580 Now, in turn, I'm also controlling the input. 72 00:06:09,770 --> 00:06:14,680 Remember when it was just an empty string, while we could type all day long and nothing was changing 73 00:06:14,680 --> 00:06:15,380 in the input. 74 00:06:15,760 --> 00:06:24,190 So now, of course, once we have our own change and we have the function, we access the event object. 75 00:06:24,190 --> 00:06:31,120 And then in order to get the value for this particular input, I would need to go with event object 76 00:06:31,300 --> 00:06:38,320 that I'm looking for to target and then I'm looking for the value so similar like we worked and just 77 00:06:38,500 --> 00:06:39,550 went with JavaScript. 78 00:06:39,550 --> 00:06:46,030 Or in this case, we directly can access our input because we have an object, then we have a target. 79 00:06:46,270 --> 00:06:47,650 So that is going to be our input. 80 00:06:47,860 --> 00:06:52,120 And then more specifically, we're looking for the value property. 81 00:06:52,870 --> 00:06:59,020 And of course, once we have this set up, I would want to do the same thing for my email where I'll 82 00:06:59,020 --> 00:07:00,010 copy and paste. 83 00:07:00,580 --> 00:07:04,360 And in the email I'll also do the same thing. 84 00:07:04,930 --> 00:07:06,490 So I have on change. 85 00:07:06,490 --> 00:07:14,680 However, in this case, of course, I would want to call set email, not first name, but the event 86 00:07:15,190 --> 00:07:16,090 of course, won't change. 87 00:07:16,450 --> 00:07:21,510 So I'm going to go here with email and once we do that, check it out. 88 00:07:21,520 --> 00:07:25,300 Now I can type and everything is displayed correctly. 89 00:07:25,660 --> 00:07:33,070 And of course once we have this particular set up now in the handle submit, instead of looking for 90 00:07:33,220 --> 00:07:42,220 specific input, once I submit the form now I have access to them in the state, the first name as well 91 00:07:42,220 --> 00:07:43,330 as the email. 92 00:07:43,660 --> 00:07:44,530 So let's do that. 93 00:07:45,010 --> 00:07:49,960 I will consider log here the first name or last name. 94 00:07:50,590 --> 00:07:54,430 First name and forms are email I guess more properly. 95 00:07:54,820 --> 00:07:55,660 So it's type. 96 00:07:56,600 --> 00:08:01,820 We're going to go here, know what, let's write some reasonable name, John, and then we're going 97 00:08:01,820 --> 00:08:11,510 to go with John at Gmail dot com and once we add the person, there it is now we have John and John 98 00:08:11,510 --> 00:08:13,070 at Gmail dot com. 99 00:08:13,460 --> 00:08:17,710 So that's how we can set up controlled inputs in react. 100 00:08:18,110 --> 00:08:27,290 Remember, you need to have a value property that references some state value and then you have on change 101 00:08:27,290 --> 00:08:30,980 event listener where either you set up a reference. 102 00:08:31,400 --> 00:08:38,660 So either you set up a function here like we did with and or submit, just make sure that in either 103 00:08:38,660 --> 00:08:41,150 case you're looking for this event. 104 00:08:41,270 --> 00:08:45,740 So you passed in that first parameter because that will reference the event object. 105 00:08:45,980 --> 00:08:51,230 And then in order to control the state value, you call the set function. 106 00:08:51,440 --> 00:08:55,790 And then what you would want to pass in is the event target. 107 00:08:56,180 --> 00:09:02,390 So you're grabbing the input and more specifically, you'd want to get the value for each and every 108 00:09:02,390 --> 00:09:08,570 time you type something in the form, in turn you'll change the state value. 109 00:09:08,870 --> 00:09:16,330 And then since that state of value is referenced over here also, it will be displayed in the form input.