1 00:00:01,170 --> 00:00:03,120 ‫Let's now learn how we can work 2 00:00:03,120 --> 00:00:04,530 ‫with event handlers 3 00:00:04,530 --> 00:00:07,863 ‫and how we update state in class components. 4 00:00:09,390 --> 00:00:12,570 ‫So just like before, basically here, 5 00:00:12,570 --> 00:00:16,290 ‫we now want to use the onClick property 6 00:00:16,290 --> 00:00:20,430 ‫in order to add an event handler to this button. 7 00:00:20,430 --> 00:00:24,660 ‫But now where do we actually write that event handler? 8 00:00:24,660 --> 00:00:26,670 ‫Well, remember how I said 9 00:00:26,670 --> 00:00:29,850 ‫that this render method here is basically equivalent 10 00:00:29,850 --> 00:00:31,140 ‫to the function body 11 00:00:31,140 --> 00:00:34,740 ‫of a functional component or a function component. 12 00:00:34,740 --> 00:00:37,920 ‫So I use these two terms interchangeably 13 00:00:37,920 --> 00:00:39,840 ‫so they're basically the same. 14 00:00:39,840 --> 00:00:42,660 ‫But anyway, since this is equivalent 15 00:00:42,660 --> 00:00:46,890 ‫to basically the function body of the functional component, 16 00:00:46,890 --> 00:00:47,910 ‫we might think 17 00:00:47,910 --> 00:00:51,240 ‫that this is where we now define our event handlers. 18 00:00:51,240 --> 00:00:55,380 ‫So just like we do in functional components, right? 19 00:00:55,380 --> 00:00:59,550 ‫However, that's not what we do in class components. 20 00:00:59,550 --> 00:01:00,840 ‫So in class components, 21 00:01:00,840 --> 00:01:04,650 ‫this render method should be as clean as possible, 22 00:01:04,650 --> 00:01:09,060 ‫so it should contain as little render logic as possible. 23 00:01:09,060 --> 00:01:13,080 ‫And so instead, our handler functions are defined 24 00:01:13,080 --> 00:01:14,613 ‫as class methods. 25 00:01:15,840 --> 00:01:20,727 ‫So let's define handleDecrement, decrement like this. 26 00:01:24,330 --> 00:01:27,810 ‫And so with this, we have a brand new class method. 27 00:01:27,810 --> 00:01:30,240 ‫And so here now we update the state. 28 00:01:30,240 --> 00:01:33,390 ‫But before we do that, let me actually show you something 29 00:01:33,390 --> 00:01:34,683 ‫that we need to do first. 30 00:01:36,120 --> 00:01:38,490 ‫So let me log the this keyword 31 00:01:38,490 --> 00:01:42,360 ‫because the this keyword is necessary all the time. 32 00:01:42,360 --> 00:01:44,493 ‫So we will actually also need it here. 33 00:01:46,470 --> 00:01:50,430 ‫Okay, but now let's then connect this onClick prop 34 00:01:50,430 --> 00:01:52,230 ‫with this handler function. 35 00:01:52,230 --> 00:01:56,280 ‫And the way we do that is again using the this keyword 36 00:01:56,280 --> 00:01:57,633 ‫and then handleDecrement. 37 00:01:59,430 --> 00:02:02,430 ‫And so again, the this keyword basically points 38 00:02:02,430 --> 00:02:04,800 ‫to the current component instance, 39 00:02:04,800 --> 00:02:07,290 ‫which will inherit this method here 40 00:02:07,290 --> 00:02:09,483 ‫from the class definition. 41 00:02:10,380 --> 00:02:13,200 ‫All right, let's give it a save 42 00:02:13,200 --> 00:02:16,050 ‫and then let's click this button. 43 00:02:16,050 --> 00:02:21,030 ‫And so you see that we get undefined or in other words, 44 00:02:21,030 --> 00:02:26,030 ‫that the this keyword inside this handler here is undefined. 45 00:02:26,460 --> 00:02:29,340 ‫However, we need the this keyword to point 46 00:02:29,340 --> 00:02:30,840 ‫to the current component 47 00:02:30,840 --> 00:02:33,780 ‫because that's how we will update the state. 48 00:02:33,780 --> 00:02:37,090 ‫So we will update the state by doing this.setState 49 00:02:39,870 --> 00:02:41,670 ‫and then here something. 50 00:02:41,670 --> 00:02:45,240 ‫So we are going to need the this keyword, but again, 51 00:02:45,240 --> 00:02:47,250 ‫it is currently undefined. 52 00:02:47,250 --> 00:02:49,470 ‫And the reason for that is simply the way 53 00:02:49,470 --> 00:02:51,780 ‫in which JavaScript works. 54 00:02:51,780 --> 00:02:54,750 ‫So when React calls our event handler here, 55 00:02:54,750 --> 00:02:58,470 ‫it first actually, behind the scenes, creates a copy 56 00:02:58,470 --> 00:02:59,700 ‫of this function. 57 00:02:59,700 --> 00:03:01,440 ‫And so then the function call 58 00:03:01,440 --> 00:03:03,870 ‫is just a normal function call, 59 00:03:03,870 --> 00:03:06,660 ‫which is not bound to any object. 60 00:03:06,660 --> 00:03:10,680 ‫And so because of that, this function then loses the binding 61 00:03:10,680 --> 00:03:12,960 ‫to the current this keyword. 62 00:03:12,960 --> 00:03:15,180 ‫But that's all not really important. 63 00:03:15,180 --> 00:03:17,040 ‫The only thing that matters to know 64 00:03:17,040 --> 00:03:19,800 ‫is that all event handlers that are called here 65 00:03:19,800 --> 00:03:24,180 ‫inside the JSX will lose their binding to the this keyword. 66 00:03:24,180 --> 00:03:25,745 ‫And so we need to fix that 67 00:03:25,745 --> 00:03:29,373 ‫by coming here again to our constructor method. 68 00:03:30,300 --> 00:03:33,963 ‫And then we basically need to override the method. 69 00:03:34,980 --> 00:03:39,370 ‫So writing this .handleDecrement is equal 70 00:03:40,680 --> 00:03:43,350 ‫to this.decrement. 71 00:03:43,350 --> 00:03:45,720 ‫And then we use the bind method 72 00:03:45,720 --> 00:03:50,720 ‫to manually bind the this keyword to this function here. 73 00:03:51,000 --> 00:03:52,290 ‫And so by doing this, 74 00:03:52,290 --> 00:03:55,410 ‫we basically give this method here access 75 00:03:55,410 --> 00:03:58,383 ‫to the current component instance again. 76 00:03:59,730 --> 00:04:02,430 ‫All right, and so if you ever come across 77 00:04:02,430 --> 00:04:04,170 ‫some older React code base, 78 00:04:04,170 --> 00:04:06,930 ‫you will see this kind of thing everywhere. 79 00:04:06,930 --> 00:04:09,450 ‫So this manually binding the this keyword 80 00:04:09,450 --> 00:04:11,910 ‫to our event handler functions. 81 00:04:11,910 --> 00:04:13,860 ‫And so now if we click this button, 82 00:04:13,860 --> 00:04:18,510 ‫you see that we actually get access to this object. 83 00:04:18,510 --> 00:04:20,040 ‫So we can see even the state, 84 00:04:20,040 --> 00:04:23,373 ‫the props that it received and some other stuff. 85 00:04:24,210 --> 00:04:27,180 ‫But that's not really why we're here. 86 00:04:27,180 --> 00:04:29,763 ‫So we are here to update the state. 87 00:04:30,840 --> 00:04:33,960 ‫And so as I mentioned earlier, we do this 88 00:04:33,960 --> 00:04:37,996 ‫by calling the setState method on the this keyword. 89 00:04:37,996 --> 00:04:41,520 ‫And the way this setState method works is very similar 90 00:04:41,520 --> 00:04:44,220 ‫to the stateSetter functions that we get back 91 00:04:44,220 --> 00:04:46,770 ‫from a useState hook call. 92 00:04:46,770 --> 00:04:50,430 ‫So basically, we can update state in two different ways. 93 00:04:50,430 --> 00:04:53,250 ‫We can just pass in the new state here 94 00:04:53,250 --> 00:04:57,270 ‫or we can update the state based on the current state. 95 00:04:57,270 --> 00:04:59,640 ‫So let's actually do the second one. 96 00:04:59,640 --> 00:05:02,190 ‫So by providing a callback function here, 97 00:05:02,190 --> 00:05:05,913 ‫which gets access to the entire current state object. 98 00:05:06,780 --> 00:05:08,647 ‫So let's call it currentState. 99 00:05:10,710 --> 00:05:14,640 ‫And then let's actually explicitly return 100 00:05:14,640 --> 00:05:17,550 ‫the new state object here just so we know 101 00:05:17,550 --> 00:05:19,230 ‫that this is what we need to do. 102 00:05:19,230 --> 00:05:23,220 ‫So we need to return a new object where the count property 103 00:05:23,220 --> 00:05:24,543 ‫is then updated. 104 00:05:26,160 --> 00:05:28,200 ‫So we can get the current count 105 00:05:28,200 --> 00:05:33,200 ‫from curState.ount, and then we just add one. 106 00:05:34,950 --> 00:05:36,813 ‫Okay? And that's it. 107 00:05:39,150 --> 00:05:42,330 ‫And while that's actually the opposite direction, 108 00:05:42,330 --> 00:05:47,330 ‫so we want to subtract one, but in any case, that's working. 109 00:05:48,360 --> 00:05:49,320 ‫Great. 110 00:05:49,320 --> 00:05:53,040 ‫So we just made our first class component dynamic 111 00:05:53,040 --> 00:05:55,800 ‫and are already updating some state. 112 00:05:55,800 --> 00:05:57,573 ‫So we're doing great progress. 113 00:06:00,090 --> 00:06:02,040 ‫Now let me just show you the other way. 114 00:06:05,250 --> 00:06:08,730 ‫So let's remove this. 115 00:06:08,730 --> 00:06:12,063 ‫And so here we could also have passed in simply a value. 116 00:06:13,350 --> 00:06:15,360 ‫So setting the count, for example, 117 00:06:15,360 --> 00:06:17,553 ‫to 10 whenever we click here. 118 00:06:18,900 --> 00:06:20,763 ‫So you see that works as well. 119 00:06:21,690 --> 00:06:24,840 ‫But of course, here we want to setState based 120 00:06:24,840 --> 00:06:26,313 ‫on the current state. 121 00:06:27,810 --> 00:06:32,130 ‫All right, and by the way, notice how all the concepts 122 00:06:32,130 --> 00:06:35,340 ‫behind React that we have been talking about before 123 00:06:35,340 --> 00:06:38,340 ‫still apply to class components. 124 00:06:38,340 --> 00:06:42,840 ‫So things like updating the state will rerender the UI 125 00:06:42,840 --> 00:06:44,820 ‫and all things like that. 126 00:06:44,820 --> 00:06:47,130 ‫So those fundamentals haven't changed. 127 00:06:47,130 --> 00:06:48,690 ‫The only thing that's changing 128 00:06:48,690 --> 00:06:50,550 ‫is that we write the component 129 00:06:50,550 --> 00:06:52,293 ‫in a completely different way. 130 00:06:53,370 --> 00:06:57,690 ‫But anyway, let's now just duplicate this code here 131 00:06:57,690 --> 00:07:01,410 ‫to create or handle increment event handler. 132 00:07:04,230 --> 00:07:06,090 ‫And then here all we need to do 133 00:07:06,090 --> 00:07:08,490 ‫is to just change this to plus one. 134 00:07:08,490 --> 00:07:13,490 ‫And then here also attach an event handler function. 135 00:07:14,070 --> 00:07:15,670 ‫So the one that we just created. 136 00:07:18,510 --> 00:07:20,013 ‫So handleIncrement. 137 00:07:21,150 --> 00:07:24,870 ‫And just like before, of course, we do not call the function 138 00:07:24,870 --> 00:07:28,470 ‫but we simply let React call it as soon as we click 139 00:07:28,470 --> 00:07:29,303 ‫on the button. 140 00:07:30,960 --> 00:07:33,780 ‫And so, ah, we got some error. 141 00:07:33,780 --> 00:07:36,180 ‫Well, why is that? 142 00:07:36,180 --> 00:07:37,710 ‫Ah, of course. 143 00:07:37,710 --> 00:07:41,730 ‫So I just told you before that the this keyword 144 00:07:41,730 --> 00:07:44,910 ‫will lose its meaning basically. 145 00:07:44,910 --> 00:07:48,540 ‫So inside handleIncrement, it will no longer point 146 00:07:48,540 --> 00:07:51,930 ‫to the current component instance. 147 00:07:51,930 --> 00:07:55,920 ‫And so that's why we fixed that, this binding right here 148 00:07:55,920 --> 00:08:00,137 ‫but we forgot to do the same thing for handleIncrement. 149 00:08:04,800 --> 00:08:07,740 ‫So let's fix that, give it a save. 150 00:08:07,740 --> 00:08:10,350 ‫And so now it should work. 151 00:08:10,350 --> 00:08:11,183 ‫Yes. 152 00:08:12,300 --> 00:08:15,480 ‫So never forget to do this because you see 153 00:08:15,480 --> 00:08:19,443 ‫that the consequence is that your app will not work. 154 00:08:20,520 --> 00:08:21,870 ‫Okay? 155 00:08:21,870 --> 00:08:24,930 ‫And so now let's, instead of just displaying 156 00:08:24,930 --> 00:08:27,780 ‫the number here, display the date. 157 00:08:27,780 --> 00:08:32,280 ‫So just like we did before in that date calculator. 158 00:08:32,280 --> 00:08:34,980 ‫And so this kind of very simple render logic 159 00:08:34,980 --> 00:08:37,773 ‫is actually allowed here in the render method. 160 00:08:39,360 --> 00:08:42,450 ‫So we just shouldn't define functions here like we do 161 00:08:42,450 --> 00:08:45,270 ‫in our render logic in functional components 162 00:08:45,270 --> 00:08:49,140 ‫but some simple logic like this is allowed. 163 00:08:49,140 --> 00:08:50,973 ‫So we define our date. 164 00:08:54,150 --> 00:08:56,880 ‫Let's just pass in a string here 165 00:08:56,880 --> 00:09:00,273 ‫so that JavaScript can parse the date object out of it. 166 00:09:01,170 --> 00:09:05,280 ‫So let's say we are in 2027, and then we want 167 00:09:05,280 --> 00:09:10,280 ‫to set the date on that to date.getDate. 168 00:09:12,480 --> 00:09:16,080 ‫And this is similar again to what we already did before. 169 00:09:16,080 --> 00:09:17,280 ‫So we're just transforming that 170 00:09:17,280 --> 00:09:18,873 ‫to a class-based component. 171 00:09:20,610 --> 00:09:24,720 ‫Right, so here you basically want to add the current state 172 00:09:24,720 --> 00:09:26,400 ‫to this state. 173 00:09:26,400 --> 00:09:31,140 ‫So that's this.state.count, 174 00:09:31,140 --> 00:09:32,760 ‫which again is a lot of work 175 00:09:32,760 --> 00:09:34,680 ‫where in functional components, 176 00:09:34,680 --> 00:09:38,163 ‫we would simply call that count, right? 177 00:09:39,270 --> 00:09:42,543 ‫And so let's just place that here. 178 00:09:43,380 --> 00:09:46,687 ‫So date and then toDateString. 179 00:09:48,870 --> 00:09:52,233 ‫And then let's place this here into some brackets. 180 00:09:53,700 --> 00:09:55,803 ‫And that looks a bit too big now. 181 00:09:57,630 --> 00:10:02,073 ‫Okay, and you see that it is working indeed. 182 00:10:03,330 --> 00:10:05,040 ‫Okay, and so with this, 183 00:10:05,040 --> 00:10:09,090 ‫we finish this short introduction to class components 184 00:10:09,090 --> 00:10:13,260 ‫and are now ready to build the classy weather application. 185 00:10:13,260 --> 00:10:14,940 ‫But before we go do that, 186 00:10:14,940 --> 00:10:17,520 ‫let's just quickly learn all the differences 187 00:10:17,520 --> 00:10:19,230 ‫between class components 188 00:10:19,230 --> 00:10:22,143 ‫and function components in the next video.