1 00:00:01,140 --> 00:00:03,843 ‫Welcome to the next coding challenge. 2 00:00:05,100 --> 00:00:08,070 ‫And in this one, we will build this very simple 3 00:00:08,070 --> 00:00:10,530 ‫currency conversion tool. 4 00:00:10,530 --> 00:00:13,800 ‫So here we can input some amount of money 5 00:00:13,800 --> 00:00:18,000 ‫that we want to convert from one currency to another. 6 00:00:18,000 --> 00:00:22,260 ‫So let's say for example, we want to convert 100 euro, 7 00:00:22,260 --> 00:00:25,110 ‫so the input currency to the output currency, 8 00:00:25,110 --> 00:00:27,840 ‫which is US dollars right now. 9 00:00:27,840 --> 00:00:32,203 ‫And so you see that the converted value is $107.17. 10 00:00:33,750 --> 00:00:37,920 ‫And this conversion here is actually done by an API 11 00:00:37,920 --> 00:00:41,700 ‫which contains real time currency conversion data. 12 00:00:41,700 --> 00:00:43,860 ‫And so by the time you're watching this, 13 00:00:43,860 --> 00:00:47,640 ‫the value here will most likely look different. 14 00:00:47,640 --> 00:00:51,390 ‫And of course we can also change the currencies. 15 00:00:51,390 --> 00:00:55,500 ‫So let's say we want to convert from US dollar to euro, 16 00:00:55,500 --> 00:00:56,910 ‫so the other way around. 17 00:00:56,910 --> 00:01:01,910 ‫And then 100 euros or actually $100 is just €93. 18 00:01:03,600 --> 00:01:04,440 ‫Now right. 19 00:01:04,440 --> 00:01:07,770 ‫So this is the task for this lecture. 20 00:01:07,770 --> 00:01:10,140 ‫And as always, we are starting 21 00:01:10,140 --> 00:01:13,170 ‫from some very simple starter file. 22 00:01:13,170 --> 00:01:16,830 ‫So here I already have, basically the HTML skeleton 23 00:01:16,830 --> 00:01:20,550 ‫laid out for you, here in the app component. 24 00:01:20,550 --> 00:01:24,600 ‫And so your task now, is to first transform 25 00:01:24,600 --> 00:01:28,200 ‫these elements here into controlled input elements. 26 00:01:28,200 --> 00:01:30,450 ‫So just like we have done before. 27 00:01:30,450 --> 00:01:33,630 ‫And then after that, I want you to use an effect, 28 00:01:33,630 --> 00:01:35,850 ‫like we did in this section, 29 00:01:35,850 --> 00:01:40,500 ‫in order to actually do an API call to this URL here, 30 00:01:40,500 --> 00:01:43,263 ‫which will then do the actual conversion. 31 00:01:44,130 --> 00:01:46,290 ‫So here, again, 32 00:01:46,290 --> 00:01:50,010 ‫is the URL of the API that we're going to use. 33 00:01:50,010 --> 00:01:54,117 ‫So your fetch request will be made to this URL right here. 34 00:01:54,117 --> 00:01:56,580 ‫And then you can replace the amount, 35 00:01:56,580 --> 00:02:00,660 ‫the from currency and the to currency. 36 00:02:00,660 --> 00:02:03,510 ‫And if you want to get more information about this API, 37 00:02:03,510 --> 00:02:06,213 ‫you can just go to this link right here. 38 00:02:07,410 --> 00:02:08,760 ‫Alright. 39 00:02:08,760 --> 00:02:11,610 ‫And so as you see here in the demo, 40 00:02:11,610 --> 00:02:14,040 ‫the conversion is made each time 41 00:02:14,040 --> 00:02:17,130 ‫that one of these three fields here updates. 42 00:02:17,130 --> 00:02:19,230 ‫So if I delete something here, 43 00:02:19,230 --> 00:02:21,960 ‫then immediately the value is updated here 44 00:02:21,960 --> 00:02:25,260 ‫with a new value, coming from the API. 45 00:02:25,260 --> 00:02:29,340 ‫And the same if we change here to some other currency. 46 00:02:29,340 --> 00:02:31,530 ‫So this is going to be a bit similar 47 00:02:31,530 --> 00:02:33,960 ‫to what we did throughout this section. 48 00:02:33,960 --> 00:02:35,880 ‫And so take a few minutes now 49 00:02:35,880 --> 00:02:38,880 ‫and I'll see you back here once you are finished, 50 00:02:38,880 --> 00:02:42,840 ‫so that you can then check out if your solution is correct 51 00:02:42,840 --> 00:02:45,273 ‫and what you could have done maybe differently. 52 00:02:47,250 --> 00:02:48,420 ‫Okay. 53 00:02:48,420 --> 00:02:51,570 ‫So I hope that you had a great time 54 00:02:51,570 --> 00:02:54,030 ‫with building this calculator 55 00:02:54,030 --> 00:02:57,030 ‫and that you had some success with it. 56 00:02:57,030 --> 00:02:59,070 ‫So if your calculator works, 57 00:02:59,070 --> 00:03:02,070 ‫then you are already done with this video here. 58 00:03:02,070 --> 00:03:03,300 ‫But in any case, 59 00:03:03,300 --> 00:03:07,140 ‫I will of course now implement my own solution here. 60 00:03:07,140 --> 00:03:08,520 ‫And I will just start 61 00:03:08,520 --> 00:03:12,303 ‫by making these three elements here, controlled elements. 62 00:03:13,290 --> 00:03:15,363 ‫So let's create some pieces of state. 63 00:03:18,930 --> 00:03:22,200 ‫So amount and set amount. 64 00:03:22,200 --> 00:03:26,400 ‫And of course, you could have called them any other thing. 65 00:03:26,400 --> 00:03:28,590 ‫So that's not really important. 66 00:03:28,590 --> 00:03:31,323 ‫And let's actually start with one here. 67 00:03:36,090 --> 00:03:37,470 ‫So that's const. 68 00:03:37,470 --> 00:03:38,520 ‫And then here, 69 00:03:38,520 --> 00:03:41,400 ‫let's do the from currency 70 00:03:41,400 --> 00:03:44,163 ‫and set from currency. 71 00:03:46,080 --> 00:03:49,083 ‫And here the default is going to be euro. 72 00:03:51,360 --> 00:03:55,320 ‫And then let's do the same for the other currency. 73 00:03:55,320 --> 00:03:59,703 ‫So to currency and set to currency. 74 00:04:01,770 --> 00:04:05,280 ‫And so here let's use by default, US dollar. 75 00:04:05,280 --> 00:04:07,950 ‫And now we just need to wire all that up 76 00:04:07,950 --> 00:04:10,023 ‫here with these elements. 77 00:04:10,860 --> 00:04:13,350 ‫So the value should be the amount. 78 00:04:13,350 --> 00:04:16,233 ‫And then on change, we do, 79 00:04:19,170 --> 00:04:23,010 ‫set amount is equal to e.target.value 80 00:04:25,230 --> 00:04:28,950 ‫but we should not forget to actually convert this 81 00:04:28,950 --> 00:04:30,750 ‫to a number. 82 00:04:30,750 --> 00:04:32,640 ‫Because otherwise we get a string 83 00:04:32,640 --> 00:04:35,250 ‫and that we cannot really convert. 84 00:04:35,250 --> 00:04:38,700 ‫Well probably we could, actually because we will 85 00:04:38,700 --> 00:04:41,610 ‫then plug it here into a string later. 86 00:04:41,610 --> 00:04:44,130 ‫But yeah, it's nicer to have it all 87 00:04:44,130 --> 00:04:45,903 ‫in the correct data format here. 88 00:04:48,660 --> 00:04:52,964 ‫But anyway, this now is the from currency. 89 00:04:52,964 --> 00:04:53,797 ‫And then 90 00:04:55,290 --> 00:04:57,213 ‫on change will be, 91 00:05:01,170 --> 00:05:03,870 ‫set from currency, 92 00:05:03,870 --> 00:05:07,103 ‫again, e.target.value. 93 00:05:10,230 --> 00:05:11,070 ‫Okay. 94 00:05:11,070 --> 00:05:13,710 ‫And now I will just copy the same thing 95 00:05:13,710 --> 00:05:16,593 ‫here to the other select element. 96 00:05:18,240 --> 00:05:21,570 ‫So to currency and 97 00:05:21,570 --> 00:05:24,120 ‫set to currency. 98 00:05:24,120 --> 00:05:28,620 ‫And here we are missing this closing brackets. 99 00:05:28,620 --> 00:05:33,620 ‫And yeah, that's it for the controlled elements. 100 00:05:34,140 --> 00:05:37,323 ‫And so let's now get to work on the effect. 101 00:05:39,990 --> 00:05:42,040 ‫So use effect 102 00:05:43,260 --> 00:05:48,030 ‫and then passing in our effect function, as always. 103 00:05:48,030 --> 00:05:51,963 ‫And then let's initially run this on component mount. 104 00:05:52,830 --> 00:05:56,070 ‫So we will do an HTTP request 105 00:05:56,070 --> 00:05:58,170 ‫to this URL right here. 106 00:05:58,170 --> 00:06:00,210 ‫And therefore, we will need a fetch function 107 00:06:00,210 --> 00:06:01,890 ‫which returns a promise. 108 00:06:01,890 --> 00:06:05,130 ‫And therefore, we now need an async function. 109 00:06:05,130 --> 00:06:09,180 ‫And since the effect function itself cannot be async, 110 00:06:09,180 --> 00:06:11,103 ‫let's create another one in here. 111 00:06:12,180 --> 00:06:13,510 ‫So async function 112 00:06:15,450 --> 00:06:18,120 ‫and calling it simply, convert. 113 00:06:18,120 --> 00:06:23,120 ‫And then, later we will simply call that function in here. 114 00:06:26,460 --> 00:06:27,293 ‫Okay. 115 00:06:27,293 --> 00:06:29,763 ‫And now let's do the actual conversion itself. 116 00:06:30,840 --> 00:06:35,700 ‫So we will do our fetch request to this URL 117 00:06:35,700 --> 00:06:37,263 ‫right here. 118 00:06:38,130 --> 00:06:39,513 ‫So let's grab that. 119 00:06:42,360 --> 00:06:45,930 ‫And then of course we need to replace all these values here 120 00:06:45,930 --> 00:06:47,463 ‫in this template, literally. 121 00:06:48,870 --> 00:06:49,893 ‫So amount. 122 00:06:54,270 --> 00:06:56,940 ‫Here we have the from currency. 123 00:06:56,940 --> 00:07:00,490 ‫And then finally, we have also, the 124 00:07:02,670 --> 00:07:03,903 ‫to currency. 125 00:07:05,610 --> 00:07:10,110 ‫And so this will, remember, return a promise. 126 00:07:10,110 --> 00:07:12,180 ‫And so let's await that promise 127 00:07:12,180 --> 00:07:14,733 ‫and store it in a variable called, response. 128 00:07:17,220 --> 00:07:21,483 ‫And then from there, let's also await the data itself. 129 00:07:22,710 --> 00:07:27,450 ‫So await by converting the response to Jason. 130 00:07:27,450 --> 00:07:32,130 ‫And then let's start by simply logging that to the console. 131 00:07:32,130 --> 00:07:33,450 ‫So checking out the data, 132 00:07:33,450 --> 00:07:36,480 ‫so that we know which format it has. 133 00:07:36,480 --> 00:07:40,980 ‫And immediately we see down here, that we get a result. 134 00:07:40,980 --> 00:07:44,040 ‫And so that means that our effect is already working 135 00:07:44,040 --> 00:07:46,923 ‫with the default data that we gave it here. 136 00:07:48,540 --> 00:07:52,230 ‫So here then, we can see that inside the rates object, 137 00:07:52,230 --> 00:07:56,820 ‫we have the USD property, which is our to currency. 138 00:07:56,820 --> 00:07:59,283 ‫And so that's the converted value right here. 139 00:08:01,170 --> 00:08:04,170 ‫So let's try to read that value. 140 00:08:04,170 --> 00:08:07,593 ‫So that's inside, data.rates. 141 00:08:08,490 --> 00:08:12,510 ‫And now we need to dynamically read the property from there. 142 00:08:12,510 --> 00:08:14,730 ‫So in this case, that's USD 143 00:08:14,730 --> 00:08:16,920 ‫but of course we cannot hard code that. 144 00:08:16,920 --> 00:08:20,130 ‫Because if our to currency would be euros, 145 00:08:20,130 --> 00:08:22,140 ‫then here we would have euros. 146 00:08:22,140 --> 00:08:25,920 ‫And so we can simply read the property, 147 00:08:25,920 --> 00:08:27,933 ‫by doing it like this. 148 00:08:28,860 --> 00:08:30,390 ‫And so there is our number. 149 00:08:30,390 --> 00:08:32,670 ‫And so instead of logging it to the console, 150 00:08:32,670 --> 00:08:36,183 ‫we now want to have it appear on the screen right here. 151 00:08:37,020 --> 00:08:40,953 ‫So as always, what we need, is a new piece of state. 152 00:08:44,640 --> 00:08:47,130 ‫And set converted. 153 00:08:47,130 --> 00:08:48,660 ‫And so just like before, 154 00:08:48,660 --> 00:08:53,400 ‫as soon as the data arrives, we will update the state, 155 00:08:53,400 --> 00:08:56,280 ‫which will then update our user interface 156 00:08:56,280 --> 00:08:58,443 ‫and show us the converted value. 157 00:09:00,150 --> 00:09:02,430 ‫Here let's start with nothing. 158 00:09:02,430 --> 00:09:07,213 ‫And yeah, simply replacing this console.log with set 159 00:09:08,842 --> 00:09:13,560 ‫converted, give it a save and nothing happened. 160 00:09:13,560 --> 00:09:16,533 ‫But it should happen as we reload the page. 161 00:09:17,490 --> 00:09:20,850 ‫Well actually not and well of course, 162 00:09:20,850 --> 00:09:25,413 ‫the reason is that down here we still hard coded the output. 163 00:09:27,150 --> 00:09:29,850 ‫So here now we want to read converted 164 00:09:29,850 --> 00:09:33,513 ‫and then we can even write the to currency here as well. 165 00:09:36,120 --> 00:09:39,270 ‫So we have 1.0717 166 00:09:39,270 --> 00:09:41,580 ‫US dollars. 167 00:09:41,580 --> 00:09:42,413 ‫Great. 168 00:09:42,413 --> 00:09:44,580 ‫So that's working just fine. 169 00:09:44,580 --> 00:09:47,610 ‫But what if we change something here? 170 00:09:47,610 --> 00:09:50,130 ‫So now I update this to 100 171 00:09:50,130 --> 00:09:52,440 ‫but you see that nothing is happening. 172 00:09:52,440 --> 00:09:54,900 ‫And if you remember everything we just learned 173 00:09:54,900 --> 00:09:56,280 ‫throughout this section, 174 00:09:56,280 --> 00:09:58,740 ‫this is going to make total sense to you. 175 00:09:58,740 --> 00:10:01,350 ‫Because as we type a new number here, 176 00:10:01,350 --> 00:10:05,430 ‫we will update the state that is inside the app component. 177 00:10:05,430 --> 00:10:08,970 ‫And therefore we will re-render this component. 178 00:10:08,970 --> 00:10:11,070 ‫However, our effect right now, 179 00:10:11,070 --> 00:10:13,830 ‫only runs on the initial render. 180 00:10:13,830 --> 00:10:17,190 ‫So we don't have anything here in our dependency array. 181 00:10:17,190 --> 00:10:19,368 ‫And so React has no way of knowing 182 00:10:19,368 --> 00:10:23,880 ‫that it should also rerun this effect right now. 183 00:10:23,880 --> 00:10:26,010 ‫And so, let's change that. 184 00:10:26,010 --> 00:10:29,160 ‫So let's basically give our dependency array 185 00:10:29,160 --> 00:10:33,390 ‫all the values that our effect in fact depends on. 186 00:10:33,390 --> 00:10:36,900 ‫And so those are, amount, the from currency 187 00:10:36,900 --> 00:10:39,210 ‫and the to currency. 188 00:10:39,210 --> 00:10:42,030 ‫So each time one of these three changes, 189 00:10:42,030 --> 00:10:45,870 ‫then our effect here should basically synchronize 190 00:10:45,870 --> 00:10:47,343 ‫with any of those. 191 00:10:48,870 --> 00:10:52,560 ‫So amount, from currency 192 00:10:52,560 --> 00:10:54,390 ‫and to currency. 193 00:10:54,390 --> 00:10:57,000 ‫And again here I like to use the analogy, 194 00:10:57,000 --> 00:11:00,150 ‫that this dependency array is essentially 195 00:11:00,150 --> 00:11:04,110 ‫like listening for one of these three variables to change. 196 00:11:04,110 --> 00:11:06,390 ‫And then each time that happens, 197 00:11:06,390 --> 00:11:09,690 ‫it will just re-execute our effect again. 198 00:11:09,690 --> 00:11:11,760 ‫And so this means that really, 199 00:11:11,760 --> 00:11:16,760 ‫our effect is now synchronized to these three variables. 200 00:11:16,860 --> 00:11:17,693 ‫Great. 201 00:11:19,380 --> 00:11:21,510 ‫And so, as we type here, 202 00:11:21,510 --> 00:11:23,973 ‫you see that the value actually updates. 203 00:11:25,500 --> 00:11:27,150 ‫Now you do see maybe, 204 00:11:27,150 --> 00:11:30,213 ‫that it takes some time for the update to happen. 205 00:11:31,260 --> 00:11:33,300 ‫Let's maybe click here. 206 00:11:33,300 --> 00:11:36,150 ‫And notice that the change wasn't immediate. 207 00:11:36,150 --> 00:11:38,430 ‫And if you have a slower internet connection, 208 00:11:38,430 --> 00:11:41,670 ‫then maybe for you it will take even longer. 209 00:11:41,670 --> 00:11:43,050 ‫And so that's of course 210 00:11:43,050 --> 00:11:47,130 ‫because our application needs to make this API call 211 00:11:47,130 --> 00:11:50,610 ‫and only after that, the state is updated. 212 00:11:50,610 --> 00:11:54,540 ‫So only then we get our results, which we can display here. 213 00:11:54,540 --> 00:11:56,670 ‫So to tell the user about that, 214 00:11:56,670 --> 00:11:59,253 ‫we again need our loading state. 215 00:12:00,450 --> 00:12:02,580 ‫So let's do that. 216 00:12:02,580 --> 00:12:05,790 ‫And notice how here we are just ignoring errors. 217 00:12:05,790 --> 00:12:07,830 ‫So if something goes wrong, 218 00:12:07,830 --> 00:12:11,193 ‫then we are not accounting for that situation right here. 219 00:12:13,050 --> 00:12:17,070 ‫But this is just a challenge to make the effect work. 220 00:12:17,070 --> 00:12:21,270 ‫So set is loading to true. 221 00:12:21,270 --> 00:12:23,700 ‫And of course, first I need to create 222 00:12:23,700 --> 00:12:25,173 ‫this new piece of state. 223 00:12:26,430 --> 00:12:30,963 ‫So is loading and set is loading. 224 00:12:32,100 --> 00:12:35,220 ‫And we start with false. 225 00:12:35,220 --> 00:12:38,610 ‫And then before the fetch happens, we set it to true. 226 00:12:38,610 --> 00:12:42,420 ‫And once we are done, we set it to false again. 227 00:12:42,420 --> 00:12:44,440 ‫So set is loading 228 00:12:45,450 --> 00:12:46,590 ‫back to false. 229 00:12:46,590 --> 00:12:51,210 ‫But now where do we actually use, this is loading state? 230 00:12:51,210 --> 00:12:55,830 ‫So we could of course, again display some loader here. 231 00:12:55,830 --> 00:12:59,430 ‫So something like a text displaying loading. 232 00:12:59,430 --> 00:13:01,230 ‫But instead, what I want to do here, 233 00:13:01,230 --> 00:13:04,830 ‫is to basically disable these three fields. 234 00:13:04,830 --> 00:13:07,140 ‫And so that then has the purpose 235 00:13:07,140 --> 00:13:10,530 ‫of showing the user that something is happening. 236 00:13:10,530 --> 00:13:14,880 ‫And also, besides that, it then prevents the user 237 00:13:14,880 --> 00:13:17,250 ‫from typing in anything else 238 00:13:17,250 --> 00:13:21,303 ‫and creating multiple HTTP requests at the same time. 239 00:13:22,320 --> 00:13:24,180 ‫So let's do that. 240 00:13:24,180 --> 00:13:27,480 ‫And this we haven't done before, actually. 241 00:13:27,480 --> 00:13:29,790 ‫But in all of these input elements, 242 00:13:29,790 --> 00:13:32,970 ‫we can specify the disabled prop. 243 00:13:32,970 --> 00:13:35,553 ‫Which again, is standard HTML. 244 00:13:36,510 --> 00:13:40,890 ‫And so disabled basically takes a true or false. 245 00:13:40,890 --> 00:13:44,040 ‫So if we set it just to true here, 246 00:13:44,040 --> 00:13:47,070 ‫then you see that it gets like, grayed out 247 00:13:47,070 --> 00:13:49,173 ‫and then we cannot do anything with it. 248 00:13:50,100 --> 00:13:50,933 ‫Now of course, 249 00:13:50,933 --> 00:13:53,760 ‫we don't want it to always be true but instead, 250 00:13:53,760 --> 00:13:57,903 ‫we want it to be disabled, when is loading, is true. 251 00:13:59,490 --> 00:14:00,323 ‫Okay. 252 00:14:01,710 --> 00:14:03,540 ‫And we will do this many other times 253 00:14:03,540 --> 00:14:04,860 ‫throughout the course. 254 00:14:04,860 --> 00:14:07,623 ‫So this is a pretty common thing to do actually. 255 00:14:09,510 --> 00:14:10,343 ‫Okay. 256 00:14:11,490 --> 00:14:13,983 ‫And this one as well. 257 00:14:16,410 --> 00:14:18,513 ‫And now watch what happens when I click. 258 00:14:19,350 --> 00:14:22,080 ‫So very shortly, these three got disabled, 259 00:14:22,080 --> 00:14:25,590 ‫which shows the user that indeed, something is happening. 260 00:14:25,590 --> 00:14:28,503 ‫So that the data is being loaded in the background. 261 00:14:29,940 --> 00:14:32,970 ‫Now there's just one final thing that I want to do, 262 00:14:32,970 --> 00:14:37,470 ‫which is, what happens when these two are the same. 263 00:14:37,470 --> 00:14:40,350 ‫And in fact, we even get an error in this situation. 264 00:14:40,350 --> 00:14:43,770 ‫Because the API is not made for the case 265 00:14:43,770 --> 00:14:47,943 ‫that we are converting from one currency to the same one. 266 00:14:48,840 --> 00:14:52,710 ‫So let's fix that and that's not too hard. 267 00:14:52,710 --> 00:14:55,470 ‫So before we do any of this, we can check 268 00:14:55,470 --> 00:14:59,670 ‫if the from currency is the same as the to currency. 269 00:14:59,670 --> 00:15:01,050 ‫And so in that case, 270 00:15:01,050 --> 00:15:06,050 ‫then we basically do not want to run the convert function. 271 00:15:06,750 --> 00:15:08,520 ‫So let's do that down here. 272 00:15:08,520 --> 00:15:12,603 ‫So outside of this function and before even calling it. 273 00:15:14,460 --> 00:15:16,200 ‫So we just say, 274 00:15:16,200 --> 00:15:18,090 ‫if from 275 00:15:18,090 --> 00:15:19,870 ‫Cur is equal 276 00:15:20,913 --> 00:15:22,770 ‫to the to currency, 277 00:15:22,770 --> 00:15:27,770 ‫then return and also set the converted value 278 00:15:27,870 --> 00:15:29,163 ‫to the amount. 279 00:15:30,030 --> 00:15:33,510 ‫Which is simply because the converted value will be the same 280 00:15:33,510 --> 00:15:38,040 ‫as the amount, if the currency is the same, right. 281 00:15:38,040 --> 00:15:39,453 ‫So let's try that here. 282 00:15:40,950 --> 00:15:44,250 ‫I'm just reloading to getting rid of those errors. 283 00:15:44,250 --> 00:15:45,990 ‫And then let's see. 284 00:15:45,990 --> 00:15:47,640 ‫And there we go. 285 00:15:47,640 --> 00:15:49,830 ‫So now one euro is one euro. 286 00:15:49,830 --> 00:15:53,940 ‫And we didn't even have to call the API for this conversion 287 00:15:53,940 --> 00:15:57,870 ‫because it is in fact not really a conversion. 288 00:15:57,870 --> 00:15:58,703 ‫Okay. 289 00:15:58,703 --> 00:16:00,660 ‫And that's it, I think. 290 00:16:00,660 --> 00:16:04,350 ‫Now remember that we ignored errors here, 291 00:16:04,350 --> 00:16:06,720 ‫so we didn't handle them at all. 292 00:16:06,720 --> 00:16:09,720 ‫But you should never do that in the real world. 293 00:16:09,720 --> 00:16:12,720 ‫So that's just something that I wanted to mention here. 294 00:16:12,720 --> 00:16:15,930 ‫But since this is just a learning exercise, 295 00:16:15,930 --> 00:16:17,700 ‫that's no big deal. 296 00:16:17,700 --> 00:16:22,320 ‫But anyway, with this, we finish yet another section. 297 00:16:22,320 --> 00:16:25,410 ‫So congratulations on the great progress 298 00:16:25,410 --> 00:16:28,320 ‫that you have been making up until this point. 299 00:16:28,320 --> 00:16:31,290 ‫And now, after you hopefully review everything 300 00:16:31,290 --> 00:16:33,300 ‫we just learned in this section, 301 00:16:33,300 --> 00:16:35,520 ‫I'll see you right in the next one, 302 00:16:35,520 --> 00:16:37,650 ‫where we will dive even deeper 303 00:16:37,650 --> 00:16:40,143 ‫into the topic of React hooks.