1 00:00:00,090 --> 00:00:01,320 Back this way. 2 00:00:01,320 --> 00:00:08,490 We left by triggering an event to increase our state using the state state. 3 00:00:08,940 --> 00:00:14,040 So what about if you want to decrease the previous state by one? 4 00:00:14,430 --> 00:00:20,700 Well, we are still going to use the set count function to update the state. 5 00:00:20,970 --> 00:00:29,370 So one more time the set can function takes in a callback function, and inside the function we have 6 00:00:29,370 --> 00:00:34,740 access to the previous state, so we take the previous state and add one to it. 7 00:00:34,740 --> 00:00:37,330 So what about decreasing by one? 8 00:00:37,350 --> 00:00:38,760 Here is a clue. 9 00:00:38,910 --> 00:00:43,190 So you create a function or better still, we can do it as even in line. 10 00:00:43,200 --> 00:00:44,550 So let me see one more trick to it. 11 00:00:44,790 --> 00:00:46,260 So let's. 12 00:00:47,300 --> 00:00:51,920 Create a pattern here and say decrease count. 13 00:00:55,670 --> 00:00:57,800 So they're going to do it in line here. 14 00:00:57,800 --> 00:00:59,960 So it's on the button here. 15 00:00:59,960 --> 00:01:08,660 We have the function on click event handler on click and then we pass in the set count function here 16 00:01:08,660 --> 00:01:09,670 to update. 17 00:01:09,680 --> 00:01:16,820 So because we want to call the function and pass in some value, we need to call it as anonymous function 18 00:01:16,820 --> 00:01:18,200 as we did before. 19 00:01:18,380 --> 00:01:25,970 So my normal function here and my arrow function and now I have my set count as a function like that. 20 00:01:25,970 --> 00:01:33,530 So inside this function I'll pass in my callback function like that and then my arrow function is going 21 00:01:33,530 --> 00:01:34,190 to return. 22 00:01:34,220 --> 00:01:39,560 It can be something like this, but because on one line I can quickly. 23 00:01:40,760 --> 00:01:44,000 Because going to retain a single value, I can do it on one line. 24 00:01:44,000 --> 00:01:49,870 So here, instead of doing something like this carry basis and then return something like this one, 25 00:01:49,880 --> 00:01:51,320 the same thing as before. 26 00:01:51,740 --> 00:01:56,060 So here I have access to my previous state. 27 00:01:56,630 --> 00:01:59,600 I would take the previous state minus one. 28 00:02:00,430 --> 00:02:01,570 So let's save it. 29 00:02:01,570 --> 00:02:03,610 And now let's check it out. 30 00:02:03,640 --> 00:02:05,080 If I click on. 31 00:02:05,080 --> 00:02:06,340 Let me refresh it. 32 00:02:07,360 --> 00:02:09,919 Let's increase count and then decrease count. 33 00:02:10,030 --> 00:02:13,690 That is getting increase and now decrease. 34 00:02:13,690 --> 00:02:18,880 So this function can be shortened using the shorthand syntax. 35 00:02:19,030 --> 00:02:21,460 So again, let me go over again. 36 00:02:21,730 --> 00:02:28,030 So let me remove this one from my on click handler here again. 37 00:02:28,450 --> 00:02:30,490 So on click. 38 00:02:30,500 --> 00:02:35,420 Sorry this on click our pass in management function here. 39 00:02:35,440 --> 00:02:38,950 One more time and now I'll call my set count. 40 00:02:38,950 --> 00:02:42,400 And this set count as a function here. 41 00:02:42,430 --> 00:02:47,090 And now in this function, it takes in a callback function as this again. 42 00:02:47,110 --> 00:02:49,420 Then we have access to the PBO states. 43 00:02:49,720 --> 00:02:52,770 And now this function is going to return the previous state. 44 00:02:52,780 --> 00:02:56,320 So we can take the previous state and then subtract one from it. 45 00:02:56,350 --> 00:03:01,150 Because on one line I can quickly return codes, immediately return function. 46 00:03:01,420 --> 00:03:04,840 So I would take my previous state and then minus one. 47 00:03:05,110 --> 00:03:07,210 And which is the same as before. 48 00:03:07,930 --> 00:03:11,000 So if I click on increase and then decrease. 49 00:03:11,020 --> 00:03:12,730 And there we go. 50 00:03:13,240 --> 00:03:17,890 So what about if I want to reset it? 51 00:03:18,490 --> 00:03:19,030 All right. 52 00:03:19,030 --> 00:03:25,530 But what about if you also want to increase by MSY by ten upon upon each click? 53 00:03:25,540 --> 00:03:27,250 How are you going to do it? 54 00:03:27,520 --> 00:03:35,560 So the same as instead of just say plus plus one here we can see that previous states plus ten. 55 00:03:36,790 --> 00:03:39,790 So upon every click they're going to add ten to the previous state. 56 00:03:39,790 --> 00:03:43,270 So increase ten, 20, 30, 40, 15. 57 00:03:43,540 --> 00:03:47,710 And for the decrease to decrease by 100. 58 00:03:49,120 --> 00:03:50,710 So let's see, let's refresh it. 59 00:03:50,740 --> 00:03:51,970 Decrease by 100. 60 00:03:51,970 --> 00:03:53,410 And there we go. 61 00:03:53,650 --> 00:03:55,930 So what about the reset? 62 00:03:56,260 --> 00:03:56,530 All right. 63 00:03:56,530 --> 00:04:00,330 So let's see how we can do the reset in this video or we can even do it right now. 64 00:04:00,340 --> 00:04:03,190 So quickly, let's let's finish up this event handler. 65 00:04:03,370 --> 00:04:04,450 I mean, logic. 66 00:04:04,570 --> 00:04:06,040 So let's create a button here. 67 00:04:06,040 --> 00:04:12,970 We can copy one of this button and they come down here and now let's go this one. 68 00:04:12,970 --> 00:04:17,019 Reset count, reset, count. 69 00:04:17,380 --> 00:04:21,310 And now let's call the function animals here. 70 00:04:21,760 --> 00:04:26,950 And let me guess in my set count, and then I'll pass in zero. 71 00:04:28,780 --> 00:04:32,110 And now whatever I would type here is back to zero. 72 00:04:32,140 --> 00:04:33,580 I can refresh it. 73 00:04:33,820 --> 00:04:39,520 My count -100, I can reset back to zero. 74 00:04:39,550 --> 00:04:43,840 So this is how we handle event in React. 75 00:04:43,900 --> 00:04:47,890 We are going to do more project to put them into practice. 76 00:04:47,890 --> 00:04:49,690 So if I never care with it, don't worry. 77 00:04:49,690 --> 00:04:51,640 I'm going to repeat our set also.