WEBVTT 0 00:00.350 --> 00:00.890 All right guys. 1 00:00.900 --> 00:07.350 In the last lesson, you saw how we can handle simple events such as clicking on a button or hovering 2 00:07.440 --> 00:08.510 over it. 3 00:08.550 --> 00:14.850 Now in this lesson I want to talk about some more complex events such as the events that arise from 4 00:14.850 --> 00:16.300 within a form. 5 00:16.470 --> 00:21.330 Now when you're creating web apps, it's pretty common that you're going to be creating forms for log 6 00:21.330 --> 00:24.180 in, for registration, for contact 7 00:24.180 --> 00:29.600 and there's some peculiarities. In order to really understand how forms work 8 00:29.700 --> 00:34.680 we need to incorporate our knowledge about setting state and using state. 9 00:35.310 --> 00:42.780 So in this lesson I want to tackle how you can get the user inputs from the input element and how you 10 00:42.780 --> 00:50.220 can use the submit button in order to use the information that the user is typed in. Just as we had the 11 00:50.310 --> 00:54.750 onClick event that we could add to our submit button, 12 00:54.750 --> 01:03.540 we also have a event on the inputs called onChange and this is triggered every single time the value 13 01:03.540 --> 01:04.990 of the input changes, 14 01:05.040 --> 01:12.990 so when the user types something new inside. So we can create a function called handleChange which is 15 01:12.990 --> 01:17.390 going to be triggered every time the input is changed. 16 01:17.910 --> 01:26.910 Let's go ahead and log Changed and let's pass the name of this function over to our onChange. 17 01:26.910 --> 01:35.610 Now when I start typing inside this input namely changing it, you'll see that my handle change gets called 18 01:36.060 --> 01:39.930 every time I add a new letter. 19 01:39.960 --> 01:46.290 Now this is not very useful because what we're more interested in is actually what the user is typed 20 01:46.380 --> 01:49.330 rather than the fact that they have started typing. 21 01:49.500 --> 01:56.060 The other thing to know is that when your input element triggers the function that's stored in the on 22 01:56.060 --> 01:56.940 Change, 23 01:57.150 --> 02:05.700 it also passes over an object. And that object corresponds to the event that triggered this onChange. 24 02:06.420 --> 02:11.650 And we can log various things related to that event. 25 02:11.680 --> 02:20.410 For example, we can log event.target.value and remember that the event is the event which triggered 26 02:20.410 --> 02:21.550 the onChange, 27 02:21.550 --> 02:28.480 the target is the element that triggered this event and the value or any of the other properties on 28 02:28.480 --> 02:29.400 the target 29 02:29.500 --> 02:33.800 are the things that correspond to the value of some of these attributes. 30 02:34.060 --> 02:40.720 For example in addition to event.target.value, we can also get hold of the placeholder of the element 31 02:40.750 --> 02:45.000 that triggered the event or the type of the element that triggered the event. 32 02:45.100 --> 02:51.840 And if I hit save and start typing, you'll see that every time I enter a new letter the first thing that's 33 02:51.940 --> 02:54.940 printed is the value. 34 02:54.960 --> 02:57.750 The second is my place holder. 35 02:58.020 --> 03:00.660 And the third is the type. 36 03:00.660 --> 03:04.410 And this happens every time I type a new letter. 37 03:04.500 --> 03:11.310 So let's get rid of these other two and focus on our event.target.value. 38 03:11.310 --> 03:18.480 If I start typing, you can see that every single time I type a new letter handleChange is being triggered 39 03:18.750 --> 03:21.450 passing over the event that triggered the change 40 03:21.630 --> 03:29.730 and I'm logging the current value which corresponds to the text that exists in this particular input. 41 03:29.730 --> 03:37.320 Now what if I wanted to use this value that the user is typed somewhere else inside my app or my component? 42 03:37.690 --> 03:40.360 So if I wanted to change my hello, 43 03:40.440 --> 03:41.900 so instead of saying hello 44 03:41.940 --> 03:46.140 it actually corresponds to what's being typed in the input. 45 03:46.140 --> 03:50.530 Well to do that I of course need to have state in my app. 46 03:50.580 --> 03:52.870 So let's go ahead and create a new constant 47 03:52.920 --> 03:58.020 and then let's destructure our output four our useState to hold two things. 48 03:58.020 --> 04:05.650 One is going to be the name and the second is going to be the function setName which is going to help 49 04:05.650 --> 04:08.910 me update this name constant. 50 04:09.720 --> 04:16.210 I'm going to set this to use state and when I call this function I'm going to provide a starting value 51 04:16.540 --> 04:20.250 which is actually just going to be nothing, an empty string. 52 04:20.410 --> 04:28.490 And remember to add useState to the import when you're using this function. Now I can use this constant 53 04:28.490 --> 04:32.990 name inside my H1

. And I'm going to add it right at the end 54 04:33.020 --> 04:39.470 after the hello. So opening up a set of curly braces, inserting the value of the variable name inside 55 04:39.800 --> 04:47.420 here at the end and now what I'm gonna do is whenever a handle change gets called, I'm going to call 56 04:47.420 --> 04:54.320 setName and I'm gonna pass over the value of event.target.value. 57 04:54.320 --> 05:03.050 So now when I start writing, you can see that I'm updating the state of that name variable and then it's 58 05:03.050 --> 05:05.320 being added to my

59 05:05.540 --> 05:14.510 as I type. Now there's just one thing to remember about forms. In HTML, the elements themselves are 60 05:14.510 --> 05:17.750 responsible for handling their own state. 61 05:17.750 --> 05:22.870 For example you might remember that there's a attribute called value. 62 05:22.870 --> 05:28.310 And this corresponds to what is currently inside the input. 63 05:28.310 --> 05:34.880 Now in HTML this value is normally handled by the input property and it sets it to whatever is being 64 05:34.880 --> 05:35.710 typed in here. 65 05:36.320 --> 05:43.630 But in React what you should really do is set the value to the variable that comes from the event. 66 05:43.640 --> 05:45.320 target.value. 67 05:45.320 --> 05:46.100 In our case 68 05:46.130 --> 05:47.740 that would of course be this thing 69 05:47.780 --> 05:55.760 name. This way we have one single source of truth which is the state of name. 70 05:56.310 --> 06:02.680 So whenever we use it inside other components or when we have it as the value of the inputs, they're 71 06:02.700 --> 06:08.000 all corresponding to the same thing and they're all going to match up. 72 06:08.310 --> 06:13.290 And this in React lingo is called a controlled component. 73 06:13.650 --> 06:20.220 And I highly recommend you to take a look at this link which I'll add in the course resources and have 74 06:20.220 --> 06:27.210 a brief read just of this paragraph where they talk about this concept of controlled components. And 75 06:27.210 --> 06:33.420 don't worry if you're seeing this documentation in 2019 when I'm recording this, they're still showing 76 06:33.420 --> 06:38.010 class components. But in the future hopefully they'll update this to show hooks instead. 77 06:38.430 --> 06:40.460 But the concept is the same. 78 06:40.620 --> 06:48.510 We have to add the value that comes from our state as the value attributes of our inputs and keeping 79 06:48.600 --> 06:51.300 a single source of truth. 80 06:51.480 --> 06:56.440 And that's basically all there is to this idea of controlled components. 81 06:56.640 --> 06:58.910 Now here's a challenge for you. 82 06:59.040 --> 07:07.530 What if I wanted to be able to type in a name and then only when I click on the Submit button does it 83 07:07.530 --> 07:09.840 get added to my

? 84 07:09.930 --> 07:16.200 See if you can use what you've learned in this lesson and the last lesson to complete this challenge. 85 07:16.710 --> 07:23.310 Just as a hint, you're going to need to detect events in the submit button. 86 07:23.310 --> 07:31.890 You're probably going to need another variable to keep track of state and you might have to also have 87 07:31.890 --> 07:36.100 a mess around with your code until you can get it to work. 88 07:36.240 --> 07:40.590 Pause a video now, give it a go and then come back and we'll walk through the answer together. 89 07:44.100 --> 07:44.440 All right. 90 07:44.500 --> 07:50.290 So the first thing we need to do is we're probably going to need to add a onClick listener to our submit 91 07:50.290 --> 07:51.220 button. 92 07:51.430 --> 07:59.350 And when this button gets clicked, we're going to trigger a function which I'll call handleClick. 93 07:59.350 --> 08:02.670 Now handleClick doesn't need to look at the event data, 94 08:02.680 --> 08:04.110 it doesn't really care. 95 08:04.120 --> 08:08.050 It just need to be triggered when the user presses on this button. 96 08:08.050 --> 08:10.640 So that's what we're going to pass in here, 97 08:10.690 --> 08:12.240 handleClick. 98 08:12.430 --> 08:17.230 And when that button is clicked, what do we want to happen? 99 08:17.230 --> 08:23.800 Well it's only in that moment when we want to take the value of the event.target.value that came 100 08:23.800 --> 08:27.700 from the input and then put it inside the

. 101 08:27.760 --> 08:35.920 So instead of using the name variable which is always going to be updated as we change the value of 102 08:35.920 --> 08:43.900 this input, instead maybe we can use a different variable. Maybe we can call it headingText. And we can 103 08:43.900 --> 08:49.700 keep track of the state of headingText by using our usestate hook. 104 08:49.900 --> 08:56.770 And we'll have another method called setHeading and we'll set that equal to useState and the initial 105 08:56.770 --> 08:59.880 value is also going to be an empty string. 106 08:59.920 --> 09:02.500 We don't want anything to show up after the word hello. 107 09:03.340 --> 09:11.000 But, when the submit button is clicked and we want to handle that click well then we want to set our 108 09:11.000 --> 09:16.090 heading to the value of our name. 109 09:16.090 --> 09:22.750 So we're using this name variable and setting it as the heading text. 110 09:22.780 --> 09:29.200 So a quick note here is that when you're writing a function you can simply just use the name of the 111 09:29.200 --> 09:30.200 variable. 112 09:30.250 --> 09:32.910 You don't need the curly braces around it. 113 09:33.010 --> 09:39.670 And in fact if you do add the curly braces, then you're going to set your heading text to be a Javascript 114 09:39.880 --> 09:44.930 object rather than just a value, like so. 115 09:44.950 --> 09:46.740 So that's the thing to be careful about. 116 09:46.810 --> 09:56.590 And if in doubt, you can always use the log statement to log what { name } looks like which 117 09:56.590 --> 10:04.220 is an object versus what just the name property is which is just the actual value. 118 10:04.450 --> 10:11.050 Once we've set the heading then the value of name at this moment in time is going to become the heading 119 10:11.050 --> 10:14.610 text and then the heading text should display in our

. 120 10:14.800 --> 10:23.130 And if we check it out and click submit then you can see this is how it's meant to work. Did you manage 121 10:23.130 --> 10:24.110 to get it right? 122 10:24.240 --> 10:29.290 If not head back to your code and see if you can fix it and get it to work. 123 10:29.490 --> 10:37.050 Now the very last thing I want to show you regarding forms is normally we're used to putting our inputs 124 10:37.140 --> 10:41.970 and our submit buttons inside an HTML form component 125 10:42.240 --> 10:51.670 and so it would look something like this. And maybe you would have the button type being set to submit 126 10:52.150 --> 10:58.140 so that if you had multiple buttons it's only this one that would trigger the submission of the form. 127 10:58.750 --> 11:06.430 But even if I didn't have this type submit, notice what happens when I have a button inside a form component 128 11:06.820 --> 11:08.110 and I click on it. 129 11:08.590 --> 11:16.540 So if I go ahead and type my name in here, I'm expecting it to show up in the

, but if I click on submit 130 11:16.540 --> 11:24.700 right now see how it added it to the

but then it quickly refreshed the app. And this is the default 131 11:24.700 --> 11:31.570 behavior of form components in HTML. They refresh in order to submit, make a post request or make 132 11:31.570 --> 11:35.010 a get request and refreshes the page. 133 11:35.290 --> 11:44.710 And what happens is when you click on the button inside the form especially if this is the submit button, 134 11:45.280 --> 11:50.800 then it actually triggers a method on the form called onSubmit. 135 11:50.950 --> 11:59.590 So you can in fact set this to the handler or whatever it is you decide to do when that button gets 136 11:59.590 --> 12:00.120 clicked 137 12:00.580 --> 12:07.600 and this has the same effect. When the button gets clicked inside the form it triggers the onSubmit 138 12:07.660 --> 12:12.710 of the form and calls the function that you have designated. 139 12:12.730 --> 12:16.460 So now we haven't actually improved anything, 140 12:16.540 --> 12:22.380 it still refreshes. But we can now address it inside the handleClick function. 141 12:22.510 --> 12:28.270 So we know that we get an event passed whenever one of these event handlers get triggered. 142 12:28.270 --> 12:34.990 So we can catch that event inside this function and right at the end of the function once we've done 143 12:34.990 --> 12:41.560 everything it is that we want to do, we can get the event to call preventDefault. 144 12:41.830 --> 12:49.480 And this is a method that basically prevents the default next behavior of the event which in our case 145 12:49.510 --> 12:55.660 if it's coming from the form's onClick here, that is going to be refreshing the page. 146 12:55.660 --> 13:01.510 So now if I go ahead and type in my name and click submit, you'll notice that it gets added to the heading 147 13:01.810 --> 13:04.720 without the default behavior of the submission. 148 13:05.200 --> 13:11.650 So that's just a quick note that comes in really handy when you're working with forms in React. In the 149 13:11.650 --> 13:12.450 next lesson 150 13:12.460 --> 13:19.300 I want to take you on a brief tour and compare using classes vs. hooks to manage states. 151 13:19.390 --> 13:22.810 We saw classes being mentioned in the React documentation. 152 13:22.870 --> 13:28.820 So I want to demystify the concept and talk about why React is moving to hooks instead. 153 13:29.140 --> 13:34.540 And after that, we're going to learn how to manage more complex states including how to save JavaScript 154 13:34.630 --> 13:37.200 objects using the useState hook. 155 13:37.210 --> 13:39.930 So for all of that and more, I'll see you there.