1 00:00:01,110 --> 00:00:03,960 ‫Let's once again finish a section 2 00:00:03,960 --> 00:00:05,940 ‫with a nice coding challenge, 3 00:00:05,940 --> 00:00:08,730 ‫so that we can practice everything that we learned 4 00:00:08,730 --> 00:00:10,200 ‫in the section. 5 00:00:10,200 --> 00:00:12,150 ‫And I can't stress enough 6 00:00:12,150 --> 00:00:14,670 ‫how important these challenges are. 7 00:00:14,670 --> 00:00:18,123 ‫So please, please don't skip this video right now. 8 00:00:19,950 --> 00:00:24,600 ‫So we are going to build this very simple tip calculator. 9 00:00:24,600 --> 00:00:28,650 ‫So here you can input how much the bill was. 10 00:00:28,650 --> 00:00:30,360 ‫So let's say $100. 11 00:00:30,360 --> 00:00:34,680 ‫And then you can say how satisfied or dissatisfied 12 00:00:34,680 --> 00:00:37,950 ‫you were with the service and your friend. 13 00:00:37,950 --> 00:00:41,700 ‫So let's say that two people were out for dinner, 14 00:00:41,700 --> 00:00:44,460 ‫and then basically together you decide 15 00:00:44,460 --> 00:00:46,290 ‫how much the tip should be. 16 00:00:46,290 --> 00:00:51,290 ‫So for example, if you say it was good, that can be 10%, 17 00:00:51,660 --> 00:00:54,240 ‫but your friend says 0%. 18 00:00:54,240 --> 00:00:57,870 ‫And so then the average between the two of you is 5% 19 00:00:57,870 --> 00:01:01,050 ‫which is indeed these $5 here. 20 00:01:01,050 --> 00:01:03,960 ‫And so the final bill is $105, 21 00:01:03,960 --> 00:01:07,680 ‫which is 100 plus the $5 tip. 22 00:01:07,680 --> 00:01:12,090 ‫And of course if your friend found it absolutely amazing, 23 00:01:12,090 --> 00:01:15,810 ‫then here the average between the two of you is 15 24 00:01:15,810 --> 00:01:18,990 ‫and therefore it is a $15 tip. 25 00:01:18,990 --> 00:01:21,030 ‫And as you change the value here, 26 00:01:21,030 --> 00:01:25,080 ‫of course, it keeps updating down here. 27 00:01:25,080 --> 00:01:27,960 ‫You also have this Reset button that you can click 28 00:01:27,960 --> 00:01:31,860 ‫which will set everything back to the initial values. 29 00:01:31,860 --> 00:01:34,290 ‫Now as you build this, I want you to create 30 00:01:34,290 --> 00:01:38,010 ‫one separate component for each of these pieces. 31 00:01:38,010 --> 00:01:40,920 ‫So this one here should be one component. 32 00:01:40,920 --> 00:01:44,250 ‫For example, it can be called the bill input. 33 00:01:44,250 --> 00:01:47,760 ‫Then you should have one component for this, 34 00:01:47,760 --> 00:01:50,220 ‫for example called select percentage 35 00:01:50,220 --> 00:01:53,790 ‫and then reuse that component here again. 36 00:01:53,790 --> 00:01:55,020 ‫So with some different text 37 00:01:55,020 --> 00:01:56,940 ‫but it should be the same component. 38 00:01:56,940 --> 00:01:59,160 ‫Then here you have some output component 39 00:01:59,160 --> 00:02:00,930 ‫for displaying this text 40 00:02:00,930 --> 00:02:04,353 ‫and then a reset component just for this button. 41 00:02:05,250 --> 00:02:06,660 ‫Okay? 42 00:02:06,660 --> 00:02:08,550 ‫Now these three inputs here, 43 00:02:08,550 --> 00:02:10,860 ‫they are of course controlled elements. 44 00:02:10,860 --> 00:02:14,310 ‫And so you can start by adding their state value 45 00:02:14,310 --> 00:02:16,020 ‫into the component itself. 46 00:02:16,020 --> 00:02:18,720 ‫But you will soon notice that you actually need 47 00:02:18,720 --> 00:02:21,210 ‫this state in the parent component 48 00:02:21,210 --> 00:02:23,400 ‫because you will need it to calculate 49 00:02:23,400 --> 00:02:25,320 ‫this output right here. 50 00:02:25,320 --> 00:02:27,600 ‫So then you'll have to use the technique 51 00:02:27,600 --> 00:02:29,160 ‫of lifting state up. 52 00:02:29,160 --> 00:02:31,740 ‫And so hopefully you remember all the logic 53 00:02:31,740 --> 00:02:35,310 ‫of how that works and why we have to do that. 54 00:02:35,310 --> 00:02:37,590 ‫And in case there is still some doubt, 55 00:02:37,590 --> 00:02:40,320 ‫you can always go back and check out the lectures 56 00:02:40,320 --> 00:02:42,840 ‫where we talked about lifting up state. 57 00:02:42,840 --> 00:02:45,090 ‫and of course all the other things 58 00:02:45,090 --> 00:02:47,580 ‫that you need here in this challenge. 59 00:02:47,580 --> 00:02:51,000 ‫So, I'm aware that this challenge is not super easy 60 00:02:51,000 --> 00:02:54,180 ‫but that's what many students actually want. 61 00:02:54,180 --> 00:02:57,090 ‫So last time I asked the large majority 62 00:02:57,090 --> 00:02:59,820 ‫wanted really hard challenges. 63 00:02:59,820 --> 00:03:02,580 ‫So this is not really hard I think 64 00:03:02,580 --> 00:03:04,500 ‫but it can be a bit challenging. 65 00:03:04,500 --> 00:03:08,100 ‫So it's not just 100% straightforward. 66 00:03:08,100 --> 00:03:10,860 ‫Therefore if you run into any issues, 67 00:03:10,860 --> 00:03:12,870 ‫that's no problem at all. 68 00:03:12,870 --> 00:03:15,480 ‫So just write the part that you can 69 00:03:15,480 --> 00:03:17,520 ‫and then the rest, watch my solution. 70 00:03:17,520 --> 00:03:19,440 ‫That's 100% fine. 71 00:03:19,440 --> 00:03:22,320 ‫The most important part is that you start writing 72 00:03:22,320 --> 00:03:26,040 ‫at least some code and that you try it on your own. 73 00:03:26,040 --> 00:03:27,330 ‫And that's enough talk. 74 00:03:27,330 --> 00:03:32,283 ‫I see you here in 5 or 10 or whatever time that you need. 75 00:03:34,230 --> 00:03:37,620 ‫All right, so we have a lot of code to write 76 00:03:37,620 --> 00:03:39,513 ‫so let's get straight into it. 77 00:03:41,790 --> 00:03:45,547 ‫So I will start with a function called TipCalculator 78 00:03:47,610 --> 00:03:52,610 ‫which we will then call basically right here. 79 00:03:53,160 --> 00:03:56,433 ‫So we need no styles for this app at all. 80 00:03:58,140 --> 00:04:01,803 ‫So that's why I didn't provide any CSS starter files. 81 00:04:03,420 --> 00:04:05,547 ‫Okay, let's close down the sidebar here 82 00:04:05,547 --> 00:04:10,547 ‫and then let's start by writing out all our components. 83 00:04:10,980 --> 00:04:13,383 ‫So the next one is called BillInput. 84 00:04:17,910 --> 00:04:20,560 ‫Then let's create SelectPercentage. 85 00:04:22,380 --> 00:04:24,570 ‫And of course your component names here 86 00:04:24,570 --> 00:04:26,043 ‫can be completely different. 87 00:04:27,390 --> 00:04:31,743 ‫Then we have function Output. 88 00:04:33,060 --> 00:04:36,033 ‫And finally for Reset. 89 00:04:38,370 --> 00:04:42,750 ‫All right, now let's build them out one by one. 90 00:04:42,750 --> 00:04:45,810 ‫And we can actually start here in the TipCalculator 91 00:04:45,810 --> 00:04:48,660 ‫because all that's going to happen here 92 00:04:48,660 --> 00:04:52,293 ‫is that I will basically include all the other ones. 93 00:04:53,130 --> 00:04:54,903 ‫So let's just create a div here. 94 00:04:56,910 --> 00:04:58,617 ‫Then I will want the BillInput. 95 00:05:00,283 --> 00:05:03,543 ‫I will want two SelectPercentages. 96 00:05:09,900 --> 00:05:12,000 ‫And of course, we will later on then 97 00:05:12,000 --> 00:05:13,980 ‫pass the props into here. 98 00:05:13,980 --> 00:05:17,550 ‫I'm just, again, building the static parts 99 00:05:17,550 --> 00:05:19,323 ‫without any data at all. 100 00:05:20,280 --> 00:05:22,350 ‫So then we will have the Output 101 00:05:22,350 --> 00:05:27,350 ‫and we will have our Reset button. 102 00:05:30,300 --> 00:05:32,253 ‫Okay, let's start with this one. 103 00:05:39,960 --> 00:05:40,793 ‫Okay. 104 00:05:41,850 --> 00:05:44,520 ‫Then I will place this one into a label. 105 00:05:44,520 --> 00:05:47,373 ‫How much was the bill? 106 00:05:51,120 --> 00:05:54,870 ‫And then finally we have our first input 107 00:05:54,870 --> 00:05:59,253 ‫of the type text. 108 00:06:00,690 --> 00:06:05,690 ‫And let's add a placeholder as well, 109 00:06:06,000 --> 00:06:07,293 ‫which is always nice. 110 00:06:09,750 --> 00:06:12,993 ‫And so yeah, here we got already some, 111 00:06:14,520 --> 00:06:16,677 ‫well, something on the UI, 112 00:06:16,677 --> 00:06:21,030 ‫was just thinking of getting rid this class. 113 00:06:21,030 --> 00:06:22,920 ‫And so then we get rid 114 00:06:22,920 --> 00:06:25,713 ‫of basically all the styling altogether. 115 00:06:26,580 --> 00:06:29,313 ‫Can just come here to this CSS if we want. 116 00:06:33,930 --> 00:06:36,300 ‫And just like this. 117 00:06:36,300 --> 00:06:40,803 ‫Just to make the font family a bit nicer on the eyes. 118 00:06:42,300 --> 00:06:46,600 ‫But anyway, here, let's again return a div 119 00:06:51,540 --> 00:06:54,873 ‫and then we have a select element. 120 00:06:58,770 --> 00:07:01,770 ‫And as you already know, then inside the select 121 00:07:01,770 --> 00:07:03,783 ‫we have our different options. 122 00:07:05,010 --> 00:07:09,333 ‫So zero is for Dissatisfied, 123 00:07:10,980 --> 00:07:12,803 ‫which is 0%. 124 00:07:17,107 --> 00:07:20,370 ‫Then let's just copy this or a few times. 125 00:07:20,370 --> 00:07:24,963 ‫5, 10, and 20. 126 00:07:27,570 --> 00:07:31,133 ‫It was okay, is 5%, 127 00:07:32,460 --> 00:07:36,960 ‫then it was good is 10%, 128 00:07:36,960 --> 00:07:41,960 ‫and then 20% is for absolutely amazing. 129 00:07:46,380 --> 00:07:48,720 ‫Now, we also want some text here 130 00:07:48,720 --> 00:07:52,560 ‫and so we could pass that here in as a prop, 131 00:07:52,560 --> 00:07:55,410 ‫but I believe it's a lot nicer 132 00:07:55,410 --> 00:07:59,160 ‫to write it right here directly. 133 00:07:59,160 --> 00:08:03,753 ‫So how did you like the service? 134 00:08:05,400 --> 00:08:07,200 ‫Then close that. 135 00:08:07,200 --> 00:08:09,240 ‫And so basically including the content 136 00:08:09,240 --> 00:08:11,883 ‫between the opening and the closing tag. 137 00:08:13,620 --> 00:08:16,590 ‫How did your friend, 138 00:08:16,590 --> 00:08:20,223 ‫friend like the service? 139 00:08:23,670 --> 00:08:25,050 ‫All right. 140 00:08:25,050 --> 00:08:30,050 ‫And now I hope you remember how we get this text here. 141 00:08:30,150 --> 00:08:33,153 ‫So this content into select percentage. 142 00:08:34,320 --> 00:08:37,290 ‫And that's right, it gets automatically passed 143 00:08:37,290 --> 00:08:40,443 ‫in here as the children prop. 144 00:08:41,670 --> 00:08:46,670 ‫So let's create a paragraph or maybe a label 145 00:08:48,930 --> 00:08:51,063 ‫with exactly that. 146 00:08:54,390 --> 00:08:55,590 ‫There you go. 147 00:08:55,590 --> 00:08:57,153 ‫That looks a lot better. 148 00:08:58,110 --> 00:08:59,463 ‫So let's move on here. 149 00:09:00,420 --> 00:09:04,320 ‫Return, and here we will have an h3, 150 00:09:04,320 --> 00:09:07,113 ‫You pay X, 151 00:09:09,150 --> 00:09:10,650 ‫which is some dollars. 152 00:09:10,650 --> 00:09:14,823 ‫Let's say $A, plus, 153 00:09:17,467 --> 00:09:18,900 ‫$B for the tip. 154 00:09:18,900 --> 00:09:21,690 ‫So just some placeholders here for now 155 00:09:21,690 --> 00:09:24,633 ‫because we are building, still, the static version. 156 00:09:26,040 --> 00:09:30,353 ‫Now, finally here, a button that says Reset. 157 00:09:33,300 --> 00:09:35,670 ‫Now, okay, so that took us some time 158 00:09:35,670 --> 00:09:37,590 ‫just to build the static part 159 00:09:37,590 --> 00:09:39,540 ‫and now let's add some state. 160 00:09:39,540 --> 00:09:43,920 ‫And the best way to start is to create one piece of state 161 00:09:43,920 --> 00:09:46,710 ‫for each of these three controlled elements 162 00:09:46,710 --> 00:09:47,733 ‫that we need here. 163 00:09:49,170 --> 00:09:52,230 ‫Now as I started by saying in the very beginning, 164 00:09:52,230 --> 00:09:55,260 ‫you could have started by creating local state 165 00:09:55,260 --> 00:09:57,300 ‫right here in the component. 166 00:09:57,300 --> 00:10:00,360 ‫So basically like we learned before. 167 00:10:00,360 --> 00:10:02,910 ‫However, you would then quickly discover 168 00:10:02,910 --> 00:10:05,100 ‫that you need this input value here. 169 00:10:05,100 --> 00:10:09,420 ‫For example, right here in the TipCalculator component 170 00:10:09,420 --> 00:10:12,510 ‫because it's here where you will later calculate 171 00:10:12,510 --> 00:10:16,950 ‫this tip value right here, so that you can then display it, 172 00:10:16,950 --> 00:10:21,300 ‫so you can pass it into Output and then render it there. 173 00:10:21,300 --> 00:10:24,150 ‫Therefore, I will actually, basically, 174 00:10:24,150 --> 00:10:27,600 ‫immediately lift that state up and not even write it 175 00:10:27,600 --> 00:10:29,157 ‫in the BillInput. 176 00:10:33,330 --> 00:10:38,330 ‫So bill and setBill are equal to useState 177 00:10:40,470 --> 00:10:45,470 ‫and for some reason, sometimes, this doesn't really work 178 00:10:45,900 --> 00:10:47,823 ‫with the importing. 179 00:10:49,020 --> 00:10:53,573 ‫So then let's do it manually, useState from react. 180 00:10:56,400 --> 00:10:57,510 ‫Nice. 181 00:10:57,510 --> 00:11:01,023 ‫And actually here let's start with an empty string. 182 00:11:02,880 --> 00:11:03,713 ‫Okay. 183 00:11:03,713 --> 00:11:07,680 ‫And then we need to pass both of them in 184 00:11:07,680 --> 00:11:11,670 ‫because of course we will want to update that state 185 00:11:11,670 --> 00:11:15,840 ‫each time that the change event is fired here on the input. 186 00:11:15,840 --> 00:11:16,800 ‫Remember that? 187 00:11:16,800 --> 00:11:20,070 ‫So that's just how controlled elements work. 188 00:11:20,070 --> 00:11:23,370 ‫It's always the same recipe, always the same thing, 189 00:11:23,370 --> 00:11:25,470 ‫no matter if the state lives 190 00:11:25,470 --> 00:11:29,400 ‫right in this component or in another parent component. 191 00:11:29,400 --> 00:11:32,943 ‫But the idea is the same as you will see again in a minute. 192 00:11:34,200 --> 00:11:39,180 ‫So let's pass in a prop called Bill with the value of bill. 193 00:11:39,180 --> 00:11:43,200 ‫And then let's again use our on prefix. 194 00:11:43,200 --> 00:11:48,200 ‫So onSetBill will be setBill. 195 00:11:48,270 --> 00:11:50,550 ‫But of course it will be just as valid 196 00:11:50,550 --> 00:11:53,643 ‫to pass in prop with exactly this name. 197 00:11:56,460 --> 00:11:59,973 ‫So here we receive bill and onSetBill 198 00:12:03,360 --> 00:12:07,353 ‫and let's then use these values here. 199 00:12:09,900 --> 00:12:14,820 ‫So the value of this input field should be bill. 200 00:12:14,820 --> 00:12:16,773 ‫And when it changes, 201 00:12:21,240 --> 00:12:23,880 ‫then we want to basically set the bill 202 00:12:23,880 --> 00:12:28,860 ‫based on e.target.value 203 00:12:28,860 --> 00:12:33,860 ‫and we need to convert that whole thing to a number. 204 00:12:37,110 --> 00:12:38,070 ‫Now, okay. 205 00:12:38,070 --> 00:12:40,830 ‫Now unfortunately the dev tools don't work 206 00:12:40,830 --> 00:12:43,143 ‫as we experienced a few times already, 207 00:12:44,460 --> 00:12:45,990 ‫but in order to see it, 208 00:12:45,990 --> 00:12:50,313 ‫we can actually pass it in here into the output. 209 00:12:52,290 --> 00:12:55,860 ‫So bill is bill, 210 00:12:55,860 --> 00:12:58,260 ‫because remember how we actually display 211 00:12:58,260 --> 00:13:00,480 ‫that bill value right here. 212 00:13:00,480 --> 00:13:02,853 ‫So that's exactly this 80 right there. 213 00:13:04,440 --> 00:13:06,153 ‫So let's then receive it here. 214 00:13:09,420 --> 00:13:11,823 ‫So that's this first value right here. 215 00:13:13,560 --> 00:13:15,033 ‫So let's see. 216 00:13:16,152 --> 00:13:18,330 ‫That, yeah, that works beautifully. 217 00:13:18,330 --> 00:13:22,530 ‫So just like any normal controlled component 218 00:13:22,530 --> 00:13:23,710 ‫or controlled element 219 00:13:25,500 --> 00:13:27,900 ‫with the difference that the state 220 00:13:27,900 --> 00:13:30,030 ‫doesn't live in the component itself, 221 00:13:30,030 --> 00:13:32,100 ‫but in the parent component. 222 00:13:32,100 --> 00:13:34,350 ‫And now let's use the exact same logic 223 00:13:34,350 --> 00:13:37,353 ‫for these select percentage components. 224 00:13:39,150 --> 00:13:42,873 ‫So let's create two pieces of state, one for each of them. 225 00:13:45,330 --> 00:13:48,430 ‫So that's going to be percentage1 226 00:13:50,419 --> 00:13:51,730 ‫and setPercentange1 227 00:13:54,630 --> 00:13:58,500 ‫and the default here is zero. 228 00:13:58,500 --> 00:14:00,573 ‫And then let's just copy-paste. 229 00:14:04,110 --> 00:14:08,523 ‫And so this one here will take the value of percentage1. 230 00:14:11,520 --> 00:14:14,790 ‫So the percentage prop that this one will receive 231 00:14:14,790 --> 00:14:18,960 ‫will be equal to the percentage1 state, 232 00:14:18,960 --> 00:14:23,290 ‫while this other one, so this one also gets 233 00:14:25,896 --> 00:14:28,680 ‫a percentage prop of course, 234 00:14:28,680 --> 00:14:32,460 ‫but here the value will be given by this other state. 235 00:14:32,460 --> 00:14:35,190 ‫And so with this, we can use the same component 236 00:14:35,190 --> 00:14:37,653 ‫to set these two different state values. 237 00:14:40,080 --> 00:14:45,080 ‫Okay, and now, also the onSelect handler. 238 00:14:45,330 --> 00:14:48,813 ‫And this one will be setPercentage1, 239 00:14:50,160 --> 00:14:53,740 ‫while again here onSelect will be 240 00:14:55,777 --> 00:14:57,027 ‫setPercentage2. 241 00:15:00,870 --> 00:15:02,280 ‫All right. 242 00:15:02,280 --> 00:15:06,720 ‫Then down here we can receive them besides the children. 243 00:15:06,720 --> 00:15:09,993 ‫So the percentage and onSelect. 244 00:15:11,970 --> 00:15:16,090 ‫And so now all we have to do is value 245 00:15:18,240 --> 00:15:20,820 ‫is equal to the percentage that we receive, 246 00:15:20,820 --> 00:15:23,110 ‫and then onChange 247 00:15:27,000 --> 00:15:28,203 ‫and then onSelect. 248 00:15:30,290 --> 00:15:32,910 ‫So we can immediately convert to a number, 249 00:15:32,910 --> 00:15:36,930 ‫e.target.value. 250 00:15:36,930 --> 00:15:39,033 ‫It's always the same recipe. 251 00:15:41,280 --> 00:15:45,210 ‫So now we will not be able to immediately see a tier 252 00:15:45,210 --> 00:15:47,460 ‫but it seems to be working, 253 00:15:47,460 --> 00:15:48,303 ‫both of them. 254 00:15:49,590 --> 00:15:53,400 ‫Alright, and so now we have all our state that we need. 255 00:15:53,400 --> 00:15:58,400 ‫And so based on this, we now can already calculate the tip. 256 00:15:58,770 --> 00:16:00,360 ‫So how do we do that? 257 00:16:00,360 --> 00:16:04,680 ‫Should we create a new piece of state for the tip here? 258 00:16:04,680 --> 00:16:06,840 ‫Well, there is actually no need 259 00:16:06,840 --> 00:16:09,060 ‫and it makes no sense to do so 260 00:16:09,060 --> 00:16:12,210 ‫because the tip can be completely calculated 261 00:16:12,210 --> 00:16:15,390 ‫from the bill and the percentages. 262 00:16:15,390 --> 00:16:18,753 ‫And so we are in the presence of derived state. 263 00:16:20,400 --> 00:16:23,700 ‫So the tip is simply the bill 264 00:16:23,700 --> 00:16:27,543 ‫times the average of the two percentages. 265 00:16:29,520 --> 00:16:33,193 ‫So that's percentage1 plus percentage2, 266 00:16:34,290 --> 00:16:36,990 ‫divided by two, 267 00:16:36,990 --> 00:16:41,130 ‫and then the whole thing divided by 100. 268 00:16:41,130 --> 00:16:45,660 ‫Because here the percentages are these actual values. 269 00:16:45,660 --> 00:16:47,670 ‫So between 0 and 100 270 00:16:47,670 --> 00:16:50,800 ‫but then we need to calculate them between zero and one 271 00:16:52,260 --> 00:16:56,220 ‫because, well, that's how we calculate percentages. 272 00:16:56,220 --> 00:17:01,220 ‫And here, I don't really agree with this parenthesis here. 273 00:17:01,560 --> 00:17:04,053 ‫Let's place that right here. 274 00:17:07,020 --> 00:17:09,660 ‫So this we calculate the average percentage 275 00:17:09,660 --> 00:17:12,990 ‫and convert it to number between zero and one. 276 00:17:12,990 --> 00:17:15,750 ‫And then simply by multiplying it with the bill, 277 00:17:15,750 --> 00:17:18,540 ‫we get the amount of the tip. 278 00:17:18,540 --> 00:17:22,710 ‫And so now we are ready to also pass that here 279 00:17:22,710 --> 00:17:23,733 ‫into the output. 280 00:17:24,840 --> 00:17:27,630 ‫I mean here we receive it to pass it. 281 00:17:27,630 --> 00:17:29,553 ‫It's actually here. 282 00:17:30,810 --> 00:17:33,783 ‫So tip equal tip. 283 00:17:35,790 --> 00:17:40,017 ‫And so, can already display that here. 284 00:17:41,422 --> 00:17:46,263 ‫And then here it's as simple as adding the two together. 285 00:17:50,730 --> 00:17:52,713 ‫So let's say 100. 286 00:17:54,180 --> 00:17:55,980 ‫And one was dissatisfied, 287 00:17:55,980 --> 00:17:57,930 ‫the other one was amazing. 288 00:17:57,930 --> 00:18:01,983 ‫And so the average is 10%, which is exactly those $10. 289 00:18:04,650 --> 00:18:06,840 ‫Yep, then it becomes 20, 290 00:18:06,840 --> 00:18:09,930 ‫which together makes 120, 291 00:18:09,930 --> 00:18:11,883 ‫just make the dollar sign there. 292 00:18:14,850 --> 00:18:18,660 ‫And so yeah, this seems to be working just fine. 293 00:18:18,660 --> 00:18:23,100 ‫All we have to do now is to make this Reset button work. 294 00:18:23,100 --> 00:18:25,803 ‫But that is fortunately very simple. 295 00:18:28,860 --> 00:18:32,400 ‫So function handleReset. 296 00:18:32,400 --> 00:18:35,040 ‫And here all we need to do is really to set 297 00:18:35,040 --> 00:18:36,130 ‫all of the values 298 00:18:38,580 --> 00:18:40,443 ‫back to those initial states. 299 00:18:42,090 --> 00:18:46,533 ‫So setPercentage1 back to zero. 300 00:18:49,290 --> 00:18:52,110 ‫And here the same thing. 301 00:18:52,110 --> 00:18:56,040 ‫And then we just pass it right here. 302 00:18:56,040 --> 00:19:00,337 ‫So onReset should become handleReset like this. 303 00:19:10,337 --> 00:19:14,837 ‫And then of course the onClick event handler, onReset. 304 00:19:15,967 --> 00:19:20,097 ‫And let's see, and beautiful. 305 00:19:21,270 --> 00:19:23,760 ‫So everything back to normal. 306 00:19:23,760 --> 00:19:27,090 ‫And now what we should do is to not display 307 00:19:27,090 --> 00:19:28,890 ‫the button and this output 308 00:19:28,890 --> 00:19:31,740 ‫whenever there is actually no tip. 309 00:19:31,740 --> 00:19:35,970 ‫So then it makes no sense to display that, right? 310 00:19:35,970 --> 00:19:37,653 ‫So these two things right here. 311 00:19:38,490 --> 00:19:42,720 ‫So let's wrap them into the JavaScript mode 312 00:19:42,720 --> 00:19:46,933 ‫and then let's say bill greater than zero &&. 313 00:19:48,360 --> 00:19:52,950 ‫Now here we get a problem because we have one piece of JSX 314 00:19:52,950 --> 00:19:56,670 ‫which has basically two top-level elements 315 00:19:56,670 --> 00:19:57,870 ‫which is not allowed. 316 00:19:57,870 --> 00:20:00,963 ‫So there can only be one parent element. 317 00:20:02,220 --> 00:20:07,220 ‫And so once again, our fragment here is a very nice option. 318 00:20:08,730 --> 00:20:12,390 ‫We don't need these, give it a save. 319 00:20:12,390 --> 00:20:13,863 ‫And yeah, now they're gone. 320 00:20:14,880 --> 00:20:19,880 ‫And as soon as we start riding here, we have a tip value, 321 00:20:23,400 --> 00:20:26,790 ‫then we can see the output there in the button. 322 00:20:26,790 --> 00:20:29,640 ‫Great, and that's actually it. 323 00:20:29,640 --> 00:20:31,590 ‫So I believe the hard part here 324 00:20:31,590 --> 00:20:36,120 ‫was to have all the state living in the TipCalculator, 325 00:20:36,120 --> 00:20:39,930 ‫but then having these two components here, 326 00:20:39,930 --> 00:20:43,200 ‫needing that state and also updating that state. 327 00:20:43,200 --> 00:20:46,263 ‫So there's a lot of state passing around, 328 00:20:47,610 --> 00:20:49,203 ‫here with all of these props. 329 00:20:50,790 --> 00:20:53,460 ‫Yeah, and then also here, the tip itself. 330 00:20:53,460 --> 00:20:57,840 ‫So realizing that this indeed needs to be derived state. 331 00:20:57,840 --> 00:21:00,660 ‫'Cause otherwise you would have to calculate this tip 332 00:21:00,660 --> 00:21:03,540 ‫all over the place in order to keep it in sync 333 00:21:03,540 --> 00:21:07,050 ‫with the bill and these both percentages. 334 00:21:07,050 --> 00:21:08,760 ‫So that would be a lot of work. 335 00:21:08,760 --> 00:21:11,760 ‫And instead by having it as derived state 336 00:21:11,760 --> 00:21:14,130 ‫each time that the component rerenders 337 00:21:14,130 --> 00:21:18,420 ‫as the state is updated, this value will be calculated again 338 00:21:18,420 --> 00:21:21,453 ‫and can then also be rendered here onto the UI. 339 00:21:22,470 --> 00:21:24,510 ‫Great, but that's enough talk, 340 00:21:24,510 --> 00:21:27,540 ‫the video is running long enough already. 341 00:21:27,540 --> 00:21:30,330 ‫And so yeah, I just hope that you did 342 00:21:30,330 --> 00:21:32,820 ‫at least part of this coding challenge. 343 00:21:32,820 --> 00:21:36,330 ‫And any questions that you have, just post them in the Q&A, 344 00:21:36,330 --> 00:21:39,390 ‫along with your solution if you'd like. 345 00:21:39,390 --> 00:21:42,060 ‫So it's always nice to see different approaches 346 00:21:42,060 --> 00:21:45,570 ‫resulting in the same working application. 347 00:21:45,570 --> 00:21:47,970 ‫And with this, we then actually reach the end 348 00:21:47,970 --> 00:21:51,870 ‫of the section, but also of part one, basically. 349 00:21:51,870 --> 00:21:54,090 ‫All we have to do, if you want, 350 00:21:54,090 --> 00:21:58,860 ‫is now a complete practice project that is coming up next. 351 00:21:58,860 --> 00:22:01,620 ‫So it's a really cool project once again 352 00:22:01,620 --> 00:22:04,590 ‫and so I highly encourage you to not skip it 353 00:22:04,590 --> 00:22:06,813 ‫and meet me there as soon as possible.