1 00:00:01,110 --> 00:00:04,170 ‫So probably where React hook form 2 00:00:04,170 --> 00:00:08,490 ‫shines the most is in form error validation. 3 00:00:08,490 --> 00:00:11,850 ‫And so let's now learn how to use those features 4 00:00:11,850 --> 00:00:16,320 ‫to our advantage and do a few more interesting things, 5 00:00:16,320 --> 00:00:19,983 ‫for example, creating a reusable form row. 6 00:00:21,570 --> 00:00:23,520 ‫Now, before we do any of this, 7 00:00:23,520 --> 00:00:26,760 ‫I first want to do a small fix here. 8 00:00:26,760 --> 00:00:29,760 ‫So basically I want the entire layout here 9 00:00:29,760 --> 00:00:33,390 ‫to stay fixed except for this part here. 10 00:00:33,390 --> 00:00:37,230 ‫So whenever I scroll, then only this main part here 11 00:00:37,230 --> 00:00:40,140 ‫should actually scroll while the rest of the layout 12 00:00:40,140 --> 00:00:42,300 ‫should stay in place. 13 00:00:42,300 --> 00:00:45,120 ‫So here in app layout, all we need to do 14 00:00:45,120 --> 00:00:47,460 ‫is here in this main part, 15 00:00:47,460 --> 00:00:51,783 ‫set the overflow property to scroll. 16 00:00:52,650 --> 00:00:55,200 ‫And so now if we go back here, 17 00:00:55,200 --> 00:00:58,890 ‫yeah, nice, that's fixed then. 18 00:00:58,890 --> 00:01:02,790 ‫Now let's move to form validation. 19 00:01:02,790 --> 00:01:06,660 ‫So as I hinted at earlier, we can add some more stuff 20 00:01:06,660 --> 00:01:09,450 ‫here to this register function. 21 00:01:09,450 --> 00:01:13,710 ‫And in particular, we can as a second argument 22 00:01:13,710 --> 00:01:16,503 ‫pass in an object for validation. 23 00:01:17,430 --> 00:01:19,950 ‫So here we can do many, many things, 24 00:01:19,950 --> 00:01:22,230 ‫but the simplest one is simply 25 00:01:22,230 --> 00:01:25,350 ‫to define the required property 26 00:01:25,350 --> 00:01:29,430 ‫and then here we can actually set an error message. 27 00:01:29,430 --> 00:01:33,327 ‫So, for example, "This field is required". 28 00:01:35,940 --> 00:01:40,410 ‫And let's grab this and paste this into all of our fields 29 00:01:40,410 --> 00:01:43,293 ‫because all of them are actually required. 30 00:01:44,310 --> 00:01:46,623 ‫So then here we get some problem. 31 00:01:50,640 --> 00:01:54,373 ‫Okay, and here another one and one more 32 00:02:00,600 --> 00:02:03,840 ‫and also here for the description. 33 00:02:03,840 --> 00:02:07,143 ‫And again, we will take care of the image here later. 34 00:02:08,250 --> 00:02:11,700 ‫So with this, we made all of our fields required 35 00:02:11,700 --> 00:02:13,260 ‫and so let's see what happens 36 00:02:13,260 --> 00:02:16,323 ‫if validation fails for one of them. 37 00:02:17,550 --> 00:02:20,760 ‫So this handlesubmit function here 38 00:02:20,760 --> 00:02:23,070 ‫is actually called each time 39 00:02:23,070 --> 00:02:25,500 ‫that we attempt to submit the form 40 00:02:25,500 --> 00:02:30,480 ‫and at that point all our validations will be executed. 41 00:02:30,480 --> 00:02:34,260 ‫So all of this here will then be checked. 42 00:02:34,260 --> 00:02:36,540 ‫And in case that there is one error 43 00:02:36,540 --> 00:02:38,400 ‫in one of the validations, 44 00:02:38,400 --> 00:02:41,250 ‫then handlesubmit will not call 45 00:02:41,250 --> 00:02:43,380 ‫this onSubmit function here, 46 00:02:43,380 --> 00:02:46,500 ‫but instead it'll call the second function 47 00:02:46,500 --> 00:02:48,450 ‫that we pass in here. 48 00:02:48,450 --> 00:02:51,963 ‫So let's call it onError. 49 00:02:55,980 --> 00:03:00,180 ‫So then onError here again and this one 50 00:03:00,180 --> 00:03:04,173 ‫instead of the data receives the actual errors. 51 00:03:06,390 --> 00:03:10,713 ‫And so let's lock those to the console. 52 00:03:12,360 --> 00:03:14,973 ‫All right, let's just reload here. 53 00:03:16,200 --> 00:03:21,083 ‫And then here I will add some name, some capacity, 54 00:03:22,980 --> 00:03:25,320 ‫but the rest I will leave empty. 55 00:03:25,320 --> 00:03:29,220 ‫And so as I attempt to submit the form, 56 00:03:29,220 --> 00:03:33,150 ‫then here we do actually get these errors, 57 00:03:33,150 --> 00:03:38,150 ‫so from this line 69, which is exactly this. 58 00:03:38,490 --> 00:03:42,300 ‫So again, the reason is that validation failed 59 00:03:42,300 --> 00:03:45,210 ‫for this field and for this one. 60 00:03:45,210 --> 00:03:48,060 ‫And so then not this function was called, 61 00:03:48,060 --> 00:03:51,510 ‫but instead the second one that we pass in. 62 00:03:51,510 --> 00:03:56,130 ‫So here we can exactly see what errors we have. 63 00:03:56,130 --> 00:03:57,840 ‫So again, in the description 64 00:03:57,840 --> 00:04:02,730 ‫and the regularPrice field, great. 65 00:04:02,730 --> 00:04:05,250 ‫So that's the most basic validation, 66 00:04:05,250 --> 00:04:07,680 ‫but we can go a bit further. 67 00:04:07,680 --> 00:04:11,523 ‫So here for example, we can also set a minimum value, 68 00:04:12,671 --> 00:04:14,790 ‫or we could also set a maximum value, 69 00:04:14,790 --> 00:04:19,260 ‫but in this case, let's just go with the minimum. 70 00:04:19,260 --> 00:04:23,010 ‫And then here we need to specify the value, 71 00:04:23,010 --> 00:04:25,560 ‫so the minimum should be 1 72 00:04:25,560 --> 00:04:28,950 ‫and then we can also specify the message 73 00:04:28,950 --> 00:04:31,233 ‫in case data validation fails. 74 00:04:32,700 --> 00:04:37,700 ‫So capacity should be at least 1. 75 00:04:38,250 --> 00:04:43,200 ‫And so now if I write 0 here, 76 00:04:43,200 --> 00:04:45,600 ‫then even though I filled this field in, 77 00:04:45,600 --> 00:04:48,243 ‫it will still fail validation. 78 00:04:49,500 --> 00:04:52,980 ‫So indeed now here it is, 79 00:04:52,980 --> 00:04:55,803 ‫or actually right here in maxCapacity. 80 00:04:57,810 --> 00:05:01,950 ‫Okay, and then let's do the exact same one here 81 00:05:01,950 --> 00:05:06,950 ‫for the price and then let's also do something here 82 00:05:09,120 --> 00:05:10,950 ‫with the discount. 83 00:05:10,950 --> 00:05:13,680 ‫So the discount might actually be 0 84 00:05:13,680 --> 00:05:15,780 ‫which is even the default value, 85 00:05:15,780 --> 00:05:18,480 ‫however, there is something really important, 86 00:05:18,480 --> 00:05:21,420 ‫which is that the discount needs to be less 87 00:05:21,420 --> 00:05:23,160 ‫than the regular price. 88 00:05:23,160 --> 00:05:28,160 ‫So we cannot have a price of 100, but a discount of 200, 89 00:05:28,320 --> 00:05:31,320 ‫that's just not possible, right? 90 00:05:31,320 --> 00:05:35,550 ‫And so for that, so for that kind of situation, 91 00:05:35,550 --> 00:05:38,883 ‫we can write our own custom validation functions. 92 00:05:40,560 --> 00:05:43,740 ‫So for that we specify validate 93 00:05:43,740 --> 00:05:47,160 ‫and then here we write a callback function. 94 00:05:47,160 --> 00:05:52,160 ‫And this callback gets as an argument the current value 95 00:05:52,470 --> 00:05:56,880 ‫that is currently being input in the field. 96 00:05:56,880 --> 00:06:00,600 ‫And then here we can write any kind of logic that we want 97 00:06:00,600 --> 00:06:03,660 ‫and as soon as that logic returns true, 98 00:06:03,660 --> 00:06:07,080 ‫then the field will be correctly validated. 99 00:06:07,080 --> 00:06:10,290 ‫So just to test this, let's just check 100 00:06:10,290 --> 00:06:14,460 ‫that this value should be greater than 100. 101 00:06:14,460 --> 00:06:19,173 ‫So just, again, to test here, to write something here, 102 00:06:21,660 --> 00:06:23,760 ‫then let's remove this one 103 00:06:23,760 --> 00:06:27,513 ‫so that we don't accidentally submit the form. 104 00:06:28,740 --> 00:06:33,740 ‫And so let's see, and actually the discount is not here, 105 00:06:35,640 --> 00:06:37,173 ‫so there was no error. 106 00:06:38,190 --> 00:06:41,730 ‫So because right now it is greater than 100, 107 00:06:41,730 --> 00:06:46,730 ‫but if we try 50, then here we get for the max capacity 108 00:06:48,630 --> 00:06:52,050 ‫or actually for the discount that there is an error. 109 00:06:52,050 --> 00:06:55,350 ‫There just isn't a message because we didn't return one. 110 00:06:55,350 --> 00:06:57,753 ‫So we can also return a message here. 111 00:06:58,980 --> 00:07:02,520 ‫So basically if it is not true, 112 00:07:02,520 --> 00:07:04,740 ‫then we will return this second part. 113 00:07:04,740 --> 00:07:07,710 ‫And so then whatever we return from the validate function 114 00:07:07,710 --> 00:07:09,690 ‫will become the error message. 115 00:07:09,690 --> 00:07:14,407 ‫So let's say "Discount should be less 116 00:07:15,274 --> 00:07:19,907 ‫than the regular price", okay. 117 00:07:21,330 --> 00:07:25,140 ‫So of course we don't want to compare the value with 100, 118 00:07:25,140 --> 00:07:29,700 ‫but really with the actual price, so with this one. 119 00:07:29,700 --> 00:07:32,910 ‫So how do we get that value? 120 00:07:32,910 --> 00:07:35,310 ‫Well, there's a nice function that comes here 121 00:07:35,310 --> 00:07:38,463 ‫also from use form, which is called getValues. 122 00:07:41,781 --> 00:07:44,790 ‫And so here we can call that function 123 00:07:44,790 --> 00:07:48,693 ‫which as the name says gets all the values from the field, 124 00:07:49,530 --> 00:07:50,970 ‫or from the entire form. 125 00:07:50,970 --> 00:07:54,870 ‫And so then after calling that, this returns an object 126 00:07:54,870 --> 00:07:59,070 ‫and then from there we can get the regular price, 127 00:07:59,070 --> 00:08:00,063 ‫so regularPrice. 128 00:08:02,070 --> 00:08:05,640 ‫And here this regular price should of course 129 00:08:05,640 --> 00:08:10,020 ‫be actually greater or equal than the value 130 00:08:10,020 --> 00:08:12,600 ‫or in other words, the value should be less 131 00:08:12,600 --> 00:08:14,400 ‫than the regular price, 132 00:08:14,400 --> 00:08:16,560 ‫only in this case this will be true 133 00:08:16,560 --> 00:08:18,960 ‫and the validation will go through, 134 00:08:18,960 --> 00:08:22,233 ‫but otherwise, then we get this problem right here. 135 00:08:23,130 --> 00:08:24,243 ‫So let's check that. 136 00:08:28,230 --> 00:08:31,443 ‫So 200 and then here, let's say 500. 137 00:08:33,600 --> 00:08:38,310 ‫And indeed in the discount, we get that the discount 138 00:08:38,310 --> 00:08:40,563 ‫should be less than the regular price. 139 00:08:42,270 --> 00:08:45,060 ‫All right, so this was a nice use case 140 00:08:45,060 --> 00:08:47,520 ‫for writing our own validate function, 141 00:08:47,520 --> 00:08:51,753 ‫but this can really be helpful in all kinds of situations. 142 00:08:52,980 --> 00:08:56,460 ‫Okay, but now how do we actually get 143 00:08:56,460 --> 00:08:59,790 ‫these kind of error message from our console.log 144 00:08:59,790 --> 00:09:02,640 ‫right here into our application? 145 00:09:02,640 --> 00:09:06,030 ‫So basically we will want to display something here 146 00:09:06,030 --> 00:09:08,280 ‫or here on the site telling the user 147 00:09:08,280 --> 00:09:10,410 ‫that something is wrong. 148 00:09:10,410 --> 00:09:13,890 ‫Well, we can get these errors once again 149 00:09:13,890 --> 00:09:18,890 ‫from the use form hook by using formState 150 00:09:19,260 --> 00:09:24,213 ‫and then from that object we can read the errors property. 151 00:09:25,320 --> 00:09:30,320 ‫So errors, taking that from formState. 152 00:09:32,370 --> 00:09:35,860 ‫So let's try to log that to the console 153 00:09:40,530 --> 00:09:42,060 ‫and there it is. 154 00:09:42,060 --> 00:09:46,140 ‫So now we have the same log twice, once from line 71 155 00:09:46,140 --> 00:09:50,880 ‫which is the onError function and then from 52 156 00:09:50,880 --> 00:09:53,490 ‫and so that means that these errors 157 00:09:53,490 --> 00:09:56,583 ‫are exactly the ones that we saw before. 158 00:09:58,050 --> 00:10:01,139 ‫All right, and so now here we can use 159 00:10:01,139 --> 00:10:05,430 ‫that error style component that we already have 160 00:10:05,430 --> 00:10:09,303 ‫and display that here so in case data is an error. 161 00:10:10,770 --> 00:10:13,923 ‫So let's use optional chaining for that. 162 00:10:16,050 --> 00:10:20,520 ‫So .name because that's the name that we registered here 163 00:10:20,520 --> 00:10:25,520 ‫and then let's grab the message from there, so .message. 164 00:10:32,430 --> 00:10:36,130 ‫And if that exists, then we want to use 165 00:10:37,050 --> 00:10:40,290 ‫that error component that I just mentioned. 166 00:10:40,290 --> 00:10:44,883 ‫So here it's done, again, errors.name.message. 167 00:10:46,920 --> 00:10:48,453 ‫All right, nice. 168 00:10:50,400 --> 00:10:53,043 ‫And so now if we try to submit this, 169 00:10:54,360 --> 00:10:56,640 ‫well, of course, it only shows here 170 00:10:56,640 --> 00:10:59,730 ‫because we only implemented it in this one. 171 00:10:59,730 --> 00:11:04,410 ‫Later then all of these fields will get a message like this. 172 00:11:04,410 --> 00:11:06,360 ‫But before we go any further, 173 00:11:06,360 --> 00:11:09,690 ‫I think it's a good idea to now actually abstract 174 00:11:09,690 --> 00:11:13,830 ‫some of the things that we have here into its own component. 175 00:11:13,830 --> 00:11:15,090 ‫So what we're doing here 176 00:11:15,090 --> 00:11:18,390 ‫is actually quite repetitive all the time. 177 00:11:18,390 --> 00:11:21,720 ‫So we always have this label, then always this input 178 00:11:21,720 --> 00:11:25,380 ‫and then we will always also have this part. 179 00:11:25,380 --> 00:11:28,080 ‫And so I think we can abstract all this 180 00:11:28,080 --> 00:11:30,933 ‫into its own FormRow component. 181 00:11:32,820 --> 00:11:35,103 ‫So let's create that here. 182 00:11:36,300 --> 00:11:41,300 ‫So FormRow and then let's just grab everything we have here. 183 00:11:52,590 --> 00:11:57,180 ‫And now we have a bunch of problems, so let's fix them. 184 00:11:57,180 --> 00:12:02,180 ‫So we need to grab all of this code here obviously too 185 00:12:02,190 --> 00:12:04,800 ‫and so this will now create a huge mess 186 00:12:04,800 --> 00:12:09,540 ‫because the form will completely stop working, 187 00:12:09,540 --> 00:12:14,103 ‫but, well, that's just how refactoring works. 188 00:12:15,420 --> 00:12:18,690 ‫Now here we are actually importing it from the wrong place. 189 00:12:18,690 --> 00:12:20,460 ‫Let's undo that. 190 00:12:20,460 --> 00:12:22,893 ‫So we want it from styled components. 191 00:12:26,670 --> 00:12:29,670 ‫And now here we have the problem that this already exists 192 00:12:29,670 --> 00:12:32,610 ‫and so here we need to again use that trick 193 00:12:32,610 --> 00:12:37,523 ‫where we call this the StyledFormRow just like this. 194 00:12:43,590 --> 00:12:46,830 ‫So what do we actually need to make this work? 195 00:12:46,830 --> 00:12:51,830 ‫Well, probably we should pass in this label right here, 196 00:12:52,950 --> 00:12:54,810 ‫then also the error message 197 00:12:54,810 --> 00:12:57,273 ‫so that we can use it down there. 198 00:12:59,670 --> 00:13:02,190 ‫And then actually input is the only one 199 00:13:02,190 --> 00:13:05,550 ‫that I want to pass directly into the component. 200 00:13:05,550 --> 00:13:09,060 ‫So the input should still stay in the form 201 00:13:09,060 --> 00:13:12,030 ‫because, of course, we don't want to have to pass 202 00:13:12,030 --> 00:13:14,853 ‫all this kind of stuff here into this component. 203 00:13:15,960 --> 00:13:19,830 ‫So let's also accept the children prop, 204 00:13:19,830 --> 00:13:24,463 ‫remove that from here, and instead use the children. 205 00:13:28,920 --> 00:13:33,690 ‫Okay, so here this needs to be dynamic, 206 00:13:33,690 --> 00:13:36,990 ‫so this is what is going to be the label 207 00:13:36,990 --> 00:13:41,250 ‫and then here it will be the error. 208 00:13:41,250 --> 00:13:44,883 ‫So if there is an error, then just place that here. 209 00:13:46,710 --> 00:13:48,600 ‫And the same actually for the label. 210 00:13:48,600 --> 00:13:50,490 ‫So let's also already account 211 00:13:50,490 --> 00:13:53,223 ‫for a situation that there is no label. 212 00:13:54,120 --> 00:13:57,120 ‫So that might be, and now the only thing 213 00:13:57,120 --> 00:14:02,120 ‫that we still need to make dynamic is this part right here. 214 00:14:02,130 --> 00:14:07,130 ‫So this name is basically always the ID of the input. 215 00:14:09,360 --> 00:14:10,800 ‫So the way that this works 216 00:14:10,800 --> 00:14:12,900 ‫is that when we then click the label, 217 00:14:12,900 --> 00:14:15,030 ‫the input will be selected. 218 00:14:15,030 --> 00:14:18,783 ‫So these two are basically connected by this ID. 219 00:14:20,220 --> 00:14:22,860 ‫So the way we can access that ID there 220 00:14:22,860 --> 00:14:26,550 ‫is by using a nice trick that we have never talked about 221 00:14:26,550 --> 00:14:31,380 ‫and that we never used, but now let's actually use it. 222 00:14:31,380 --> 00:14:35,597 ‫So this input here is what will be the children, right? 223 00:14:36,660 --> 00:14:38,100 ‫So this right here. 224 00:14:38,100 --> 00:14:40,800 ‫And since we know that we only have one children, 225 00:14:40,800 --> 00:14:43,380 ‫we can actually do this. 226 00:14:43,380 --> 00:14:46,530 ‫So, again, this children will be the input 227 00:14:46,530 --> 00:14:51,530 ‫and that input here always receives an ID, so as a prop. 228 00:14:52,050 --> 00:14:56,400 ‫And so we can do children.props.id, 229 00:14:56,400 --> 00:15:00,903 ‫well not here, but right here. 230 00:15:02,790 --> 00:15:07,790 ‫So children.props.id, beautiful. 231 00:15:10,020 --> 00:15:15,020 ‫And so this component now work and let's maybe, yeah, 232 00:15:18,450 --> 00:15:20,140 ‫maybe we shouldn't have cut this 233 00:15:22,380 --> 00:15:25,443 ‫because then we cannot really test this. 234 00:15:27,240 --> 00:15:28,800 ‫So let's just put it back. 235 00:15:28,800 --> 00:15:31,720 ‫Here it needs to be again styled only form 236 00:15:33,660 --> 00:15:36,180 ‫and so now it works just like before. 237 00:15:36,180 --> 00:15:40,930 ‫And so just to test, let's then include our new FormRow 238 00:15:42,390 --> 00:15:45,573 ‫which will then again create a conflict, 239 00:15:46,530 --> 00:15:48,300 ‫so let's rename it everywhere. 240 00:15:48,300 --> 00:15:49,440 ‫And you don't have to do this, 241 00:15:49,440 --> 00:15:54,440 ‫this is just so that I can show it to you here in the code. 242 00:15:54,810 --> 00:15:59,433 ‫So FormRow2 and so why it's not working now, 243 00:16:01,320 --> 00:16:03,570 ‫I mean, what's the problem? 244 00:16:03,570 --> 00:16:06,153 ‫And probably it's just because of this. 245 00:16:08,550 --> 00:16:09,843 ‫Yeah, there we go. 246 00:16:11,310 --> 00:16:13,710 ‫So now let's attempt to import 247 00:16:13,710 --> 00:16:16,383 ‫that FormRow that we just created. 248 00:16:18,660 --> 00:16:22,973 ‫And so this then receives as an input the Cabin name. 249 00:16:30,210 --> 00:16:34,480 ‫The error is this one right here 250 00:16:37,260 --> 00:16:41,730 ‫and then simply this input here as a child. 251 00:16:41,730 --> 00:16:45,540 ‫So this is a lot cleaner, but here, of course, 252 00:16:45,540 --> 00:16:49,323 ‫it's not a string, but more like this. 253 00:16:50,280 --> 00:16:54,840 ‫And so this works now exactly the same as before. 254 00:16:54,840 --> 00:16:57,330 ‫And so now we are ready to converse 255 00:16:57,330 --> 00:17:00,783 ‫all of this here through these other form rows. 256 00:17:01,800 --> 00:17:04,980 ‫So let's change this. 257 00:17:04,980 --> 00:17:09,543 ‫And here I will just copy this part. 258 00:17:11,040 --> 00:17:14,590 ‫So here that's Maximum capacity 259 00:17:16,920 --> 00:17:20,140 ‫and here it's then errors.maxCapacity 260 00:17:23,756 --> 00:17:26,010 ‫and here we can get rid of that label. 261 00:17:29,870 --> 00:17:34,170 ‫And since we're here, let's get rid of this old one as well. 262 00:17:36,600 --> 00:17:37,773 ‫All right. 263 00:17:43,320 --> 00:17:46,890 ‫Let's place something similar here 264 00:17:46,890 --> 00:17:50,643 ‫just so then I can easier copy-paste the rest. 265 00:17:52,290 --> 00:17:57,290 ‫So, well here there's nothing to copy-paste yet, 266 00:18:01,200 --> 00:18:05,100 ‫but anyway, so here this one is already done. 267 00:18:05,100 --> 00:18:07,990 ‫then here we want the Regular price 268 00:18:12,300 --> 00:18:15,697 ‫and the errors are of course called regularPrice. 269 00:18:17,070 --> 00:18:18,780 ‫So this kind of refactoring here 270 00:18:18,780 --> 00:18:21,603 ‫is of course always a little bit of work, 271 00:18:25,951 --> 00:18:29,107 ‫but, well, I also didn't want to write it 272 00:18:31,350 --> 00:18:35,190 ‫immediately like this because then it might have been 273 00:18:35,190 --> 00:18:37,143 ‫a lot more confusing for you. 274 00:18:41,550 --> 00:18:45,753 ‫Okay, so description for a website. 275 00:18:52,860 --> 00:18:57,280 ‫And then, well, here for now, let's just specify the label 276 00:19:00,960 --> 00:19:04,863 ‫which is Cabin photo and there we go. 277 00:19:05,730 --> 00:19:10,257 ‫So I think that, yeah, it looks like we have 278 00:19:12,120 --> 00:19:14,190 ‫this completely converted now. 279 00:19:14,190 --> 00:19:16,830 ‫And so if I now try to add a cabin, 280 00:19:16,830 --> 00:19:20,523 ‫then here we have indeed a problem in all of the fields. 281 00:19:21,690 --> 00:19:26,310 ‫Let's try to set this one to 200 and also notice 282 00:19:26,310 --> 00:19:29,490 ‫that immediately after we started typing here again, 283 00:19:29,490 --> 00:19:31,500 ‫the error disappeared. 284 00:19:31,500 --> 00:19:34,140 ‫Now this one also should have disappeared. 285 00:19:34,140 --> 00:19:36,780 ‫Let's just try something else. 286 00:19:36,780 --> 00:19:39,510 ‫And so now indeed the error is gone. 287 00:19:39,510 --> 00:19:43,593 ‫But if you make it 1000 and try that again, 288 00:19:44,520 --> 00:19:49,290 ‫well, now for some reason that error is not error, 289 00:19:49,290 --> 00:19:53,190 ‫so maybe we didn't give it the right name here. 290 00:19:53,190 --> 00:19:56,340 ‫Actually it looks correct. 291 00:19:56,340 --> 00:20:00,430 ‫And so maybe it's just not appearing 292 00:20:02,160 --> 00:20:04,920 ‫or, well, maybe the other one is incorrect, 293 00:20:04,920 --> 00:20:06,303 ‫so the regular price. 294 00:20:08,490 --> 00:20:13,490 ‫But nope, everything correct and the same here 295 00:20:13,830 --> 00:20:15,573 ‫and the same here. 296 00:20:16,410 --> 00:20:18,963 ‫Well, this is not super important either, 297 00:20:20,070 --> 00:20:22,293 ‫but let's just try this again. 298 00:20:28,710 --> 00:20:32,220 ‫So let's check and so now actually 299 00:20:32,220 --> 00:20:33,903 ‫we do get the error again. 300 00:20:35,220 --> 00:20:39,540 ‫Now it's gone and now it's back, great. 301 00:20:39,540 --> 00:20:43,203 ‫So all we had to do was to actually reload the page here. 302 00:20:45,270 --> 00:20:47,280 ‫Now, this function here is actually 303 00:20:47,280 --> 00:20:49,710 ‫not really that useful, right? 304 00:20:49,710 --> 00:20:51,630 ‫So logging something to the console 305 00:20:51,630 --> 00:20:53,430 ‫is not really that important. 306 00:20:53,430 --> 00:20:55,800 ‫And this is the only thing that we need 307 00:20:55,800 --> 00:20:57,570 ‫this function for right now 308 00:20:57,570 --> 00:21:01,230 ‫BEcause the errors are simply coming right here 309 00:21:01,230 --> 00:21:06,123 ‫from the formState, right? 310 00:21:06,960 --> 00:21:09,690 ‫And so, yeah, this isn't doing anything, 311 00:21:09,690 --> 00:21:12,090 ‫but I will just leave it here for you 312 00:21:12,090 --> 00:21:13,770 ‫so that you know it exists. 313 00:21:13,770 --> 00:21:14,910 ‫So you might, for example, 314 00:21:14,910 --> 00:21:17,610 ‫also lock something here to Century 315 00:21:17,610 --> 00:21:21,423 ‫or to some other error monitoring services like that. 316 00:21:22,500 --> 00:21:27,500 ‫And yeah, so just to see have the form actually still works, 317 00:21:27,900 --> 00:21:30,570 ‫let's now submit it again. 318 00:21:30,570 --> 00:21:35,103 ‫So add the cabin and beautiful, there it is. 319 00:21:35,970 --> 00:21:40,500 ‫Now just one final thing is that we might want to disable 320 00:21:40,500 --> 00:21:43,140 ‫all of this here whenever the form 321 00:21:43,140 --> 00:21:48,140 ‫is actually being uploaded, so while isCreating is true, 322 00:21:50,250 --> 00:21:54,753 ‫so just as a small final step here. 323 00:21:59,460 --> 00:22:03,990 ‫And just one more and also here. 324 00:22:08,190 --> 00:22:13,190 ‫so let's try that again, 004, 10 people, 250, 25. 325 00:22:18,900 --> 00:22:23,160 ‫Yeah, you saw that, it turned gray there 326 00:22:23,160 --> 00:22:26,700 ‫and then here it is, great. 327 00:22:26,700 --> 00:22:29,400 ‫And so our form is almost working. 328 00:22:29,400 --> 00:22:34,020 ‫All that's left to do is to take care of this cabin photo. 329 00:22:34,020 --> 00:22:36,900 ‫And so this is where we are going to upload a photo 330 00:22:36,900 --> 00:22:39,333 ‫to our Supabase bucket.