1 00:00:01,170 --> 00:00:03,780 ‫Now it's time to set up another one 2 00:00:03,780 --> 00:00:06,000 ‫of the libraries that I introduced 3 00:00:06,000 --> 00:00:09,330 ‫in the lecture where we plant this application. 4 00:00:09,330 --> 00:00:13,350 ‫And that library is the React Hook Form Library 5 00:00:13,350 --> 00:00:17,040 ‫that we can use to greatly simplify handling forms 6 00:00:17,040 --> 00:00:20,643 ‫in real world, React, single page applications. 7 00:00:21,960 --> 00:00:24,960 ‫But first of all, let's actually first set 8 00:00:24,960 --> 00:00:28,503 ‫up the form in our JSX and in the UI. 9 00:00:29,460 --> 00:00:32,070 ‫So the library that we're going to use 10 00:00:32,070 --> 00:00:35,520 ‫is really only about handling the form submission 11 00:00:35,520 --> 00:00:38,760 ‫and form errors and things like that. 12 00:00:38,760 --> 00:00:41,703 ‫So it doesn't give us any prebuilt components. 13 00:00:42,750 --> 00:00:47,750 ‫So instead what we have already is the create cabin form. 14 00:00:47,940 --> 00:00:49,830 ‫So this component right here 15 00:00:49,830 --> 00:00:54,630 ‫and this one does indeed already have some things in here. 16 00:00:54,630 --> 00:00:56,850 ‫So we have this form component. 17 00:00:56,850 --> 00:00:58,263 ‫So let's move there. 18 00:00:59,310 --> 00:01:02,280 ‫Well, for some reason it doesn't want to move there 19 00:01:02,280 --> 00:01:05,550 ‫but you can open this file and check it out. 20 00:01:05,550 --> 00:01:07,800 ‫And then we have all these other ones. 21 00:01:07,800 --> 00:01:11,460 ‫So we have the form row, which you can study. 22 00:01:11,460 --> 00:01:13,983 ‫We have a label and we have an error. 23 00:01:15,180 --> 00:01:18,060 ‫And so then here we have one form row for each 24 00:01:18,060 --> 00:01:22,140 ‫of this data that we need to provide for a new cabin. 25 00:01:22,140 --> 00:01:25,710 ‫So this input we actually built two sections ago. 26 00:01:25,710 --> 00:01:27,573 ‫And so this one is nothing new. 27 00:01:30,656 --> 00:01:32,730 ‫So let's come to our cabin table here 28 00:01:32,730 --> 00:01:37,590 ‫and then we will want to display this form below this table. 29 00:01:37,590 --> 00:01:41,310 ‫So actually let's not even place it here in the table. 30 00:01:41,310 --> 00:01:45,510 ‫So let's leave this one here only for the table itself. 31 00:01:45,510 --> 00:01:49,410 ‫And then let's instead come to the actual cabin's page. 32 00:01:49,410 --> 00:01:52,320 ‫And then here in this row, let's add a button 33 00:01:52,320 --> 00:01:55,770 ‫and that form, and this will all just be temporary 34 00:01:55,770 --> 00:01:59,310 ‫because later on we will place this form in a modal. 35 00:01:59,310 --> 00:02:03,542 ‫But for now, let's just temporarily do it like this. 36 00:02:03,542 --> 00:02:05,883 ‫So I will add a button here. 37 00:02:07,950 --> 00:02:11,010 ‫Add new cabin 38 00:02:11,010 --> 00:02:13,950 ‫and let's add a piece of state 39 00:02:13,950 --> 00:02:18,950 ‫again just temporarily, called show form and set show form. 40 00:02:23,850 --> 00:02:28,850 ‫And then use state and start with false. 41 00:02:30,870 --> 00:02:34,113 ‫Then here we need to also include this component. 42 00:02:35,070 --> 00:02:39,360 ‫And on click, what we want to do as always 43 00:02:39,360 --> 00:02:42,810 ‫is to just toggle that show form. 44 00:02:42,810 --> 00:02:46,523 ‫So set show form like this. 45 00:02:49,620 --> 00:02:54,393 ‫And then here we want the opposite of that. 46 00:02:56,640 --> 00:02:58,230 ‫All right. 47 00:02:58,230 --> 00:03:02,100 ‫And then here, let's do some conditional rendering. 48 00:03:02,100 --> 00:03:06,423 ‫So if show form and create cabin form. 49 00:03:10,740 --> 00:03:12,750 ‫So let's see what we get. 50 00:03:12,750 --> 00:03:14,133 ‫And, nice. 51 00:03:16,440 --> 00:03:19,080 ‫So here we could then also toggle this text 52 00:03:19,080 --> 00:03:20,613 ‫but there's no need for that. 53 00:03:21,747 --> 00:03:26,747 ‫So we can actually just close this and, all right. 54 00:03:28,200 --> 00:03:33,033 ‫So let's close this, close this and come back to our form. 55 00:03:34,530 --> 00:03:36,540 ‫And so now it's time to actually set 56 00:03:36,540 --> 00:03:40,143 ‫up that React Hook Form Library. 57 00:03:41,280 --> 00:03:46,280 ‫So, let's do that, npm install React Hook form. 58 00:03:48,300 --> 00:03:50,490 ‫And just to make sure that nothing breaks 59 00:03:50,490 --> 00:03:53,133 ‫let's install version seven here. 60 00:03:54,480 --> 00:03:59,430 ‫Alright, so notice that we didn't make any 61 00:03:59,430 --> 00:04:02,340 ‫of these inputs here, controlled elements. 62 00:04:02,340 --> 00:04:07,340 ‫So we don't have a state variable for any of them, right? 63 00:04:07,680 --> 00:04:09,720 ‫And we won't need to create one 64 00:04:09,720 --> 00:04:12,030 ‫because now we will handle everything 65 00:04:12,030 --> 00:04:16,140 ‫about this form using this library that we just installed. 66 00:04:16,140 --> 00:04:18,453 ‫And so let me show you how. 67 00:04:22,410 --> 00:04:26,490 ‫So we will call the use, form hook. 68 00:04:26,490 --> 00:04:30,000 ‫And so this will give us a few functions that we can use. 69 00:04:30,000 --> 00:04:35,000 ‫And the most fundamental one is the register function 70 00:04:36,120 --> 00:04:39,660 ‫and then also very fundamental as well, 71 00:04:39,660 --> 00:04:43,470 ‫is the handle submit function. 72 00:04:43,470 --> 00:04:45,990 ‫And later we will use a few more things. 73 00:04:45,990 --> 00:04:49,110 ‫But really one of the most fundamental things 74 00:04:49,110 --> 00:04:53,730 ‫about React Hook Form, is to essentially register inputs 75 00:04:53,730 --> 00:04:55,320 ‫into this hook. 76 00:04:55,320 --> 00:05:00,090 ‫So into the form that we are setting up using, use form. 77 00:05:00,090 --> 00:05:02,190 ‫And the way that this works is 78 00:05:02,190 --> 00:05:05,640 ‫by coming here, entering JavaScript mode 79 00:05:05,640 --> 00:05:10,290 ‫and then spread the result of calling register. 80 00:05:10,290 --> 00:05:14,610 ‫So this looks very strange, but just roll with it for now. 81 00:05:14,610 --> 00:05:18,150 ‫And then here we give it the name of the field. 82 00:05:18,150 --> 00:05:20,190 ‫So let's just call it "name" 83 00:05:20,190 --> 00:05:23,403 ‫which is exactly the same SDID here. 84 00:05:25,290 --> 00:05:29,340 ‫Let's do the same thing here, dot register. 85 00:05:29,340 --> 00:05:32,160 ‫And so we are really registering all the inputs 86 00:05:32,160 --> 00:05:34,020 ‫into our form. 87 00:05:34,020 --> 00:05:37,833 ‫So here this one is called max capacity. 88 00:05:40,440 --> 00:05:43,244 ‫And now in order to see what this actually does 89 00:05:43,244 --> 00:05:46,920 ‫let's come to our components tree 90 00:05:46,920 --> 00:05:49,323 ‫which we haven't seen in a long time. 91 00:05:51,810 --> 00:05:54,863 ‫So let's find our form and ah 92 00:05:58,530 --> 00:06:01,200 ‫we should then probably open it. 93 00:06:01,200 --> 00:06:03,900 ‫Well then we get some problem. 94 00:06:03,900 --> 00:06:06,600 ‫So register is not a function 95 00:06:06,600 --> 00:06:10,143 ‫and well that's because I don't know how to type. 96 00:06:11,916 --> 00:06:15,513 ‫So that's register, not restistger. 97 00:06:17,550 --> 00:06:19,743 ‫So I'm guessing this will solve it. 98 00:06:21,210 --> 00:06:25,140 ‫Yeah. And so now let's come to our components tree. 99 00:06:25,140 --> 00:06:27,063 ‫And apparently it's at the very end. 100 00:06:32,160 --> 00:06:35,013 ‫So let's check this input right here. 101 00:06:36,690 --> 00:06:40,293 ‫So notice how this gut, these new props here 102 00:06:40,293 --> 00:06:44,160 ‫that we actually didn't place there ourselves. 103 00:06:44,160 --> 00:06:47,760 ‫So there is no on blur and no on change 104 00:06:47,760 --> 00:06:49,800 ‫to be seen on this input field. 105 00:06:49,800 --> 00:06:53,700 ‫But now they are here and they have these functions. 106 00:06:53,700 --> 00:06:55,950 ‫And so all of this was placed there 107 00:06:55,950 --> 00:07:00,870 ‫by React Hook Form simply by us doing this. 108 00:07:00,870 --> 00:07:04,020 ‫So basically the results of calling this register 109 00:07:04,020 --> 00:07:08,433 ‫will be these props associated with these functions. 110 00:07:09,660 --> 00:07:12,453 ‫So this next input should have it as well. 111 00:07:14,370 --> 00:07:16,500 ‫So the one with the maximum capacity 112 00:07:16,500 --> 00:07:19,560 ‫and then the next one doesn't have it yet. 113 00:07:19,560 --> 00:07:23,280 ‫Yeah, because there we didn't call register yet. 114 00:07:23,280 --> 00:07:25,473 ‫And so let's do that as well. 115 00:07:26,489 --> 00:07:27,389 ‫So just copy that. 116 00:07:32,670 --> 00:07:35,673 ‫So regular price. 117 00:07:36,990 --> 00:07:40,233 ‫And then here the discount. 118 00:07:42,720 --> 00:07:45,810 ‫And notice how on this one we have a default value. 119 00:07:45,810 --> 00:07:47,370 ‫So this we used before. 120 00:07:47,370 --> 00:07:49,410 ‫And so here it is just to make sure 121 00:07:49,410 --> 00:07:52,473 ‫that by default this value is zero. 122 00:07:53,940 --> 00:07:55,870 ‫Next up, let's use the description 123 00:07:59,070 --> 00:08:02,970 ‫and then we also have this file input field 124 00:08:02,970 --> 00:08:06,360 ‫but let's actually leave this one for later. 125 00:08:06,360 --> 00:08:10,320 ‫For some reason it's not actually really formatted 126 00:08:10,320 --> 00:08:12,453 ‫but we will take care of that later. 127 00:08:13,980 --> 00:08:17,100 ‫Alright, and so this was the first step 128 00:08:17,100 --> 00:08:20,340 ‫of making React Hook Form work. 129 00:08:20,340 --> 00:08:23,100 ‫So always the first step is to register 130 00:08:23,100 --> 00:08:24,660 ‫all the input fields 131 00:08:24,660 --> 00:08:27,843 ‫that we actually want React hook form, to handle. 132 00:08:28,890 --> 00:08:33,870 ‫And then the second part is to specify 133 00:08:33,870 --> 00:08:36,930 ‫the on submit form here. 134 00:08:36,930 --> 00:08:40,230 ‫And then, as you can guess, here we are going to call 135 00:08:40,230 --> 00:08:42,270 ‫that handle submit function 136 00:08:42,270 --> 00:08:44,613 ‫that we also received from use form. 137 00:08:45,900 --> 00:08:50,040 ‫So handle submit, but here we really need to call it. 138 00:08:50,040 --> 00:08:53,430 ‫And what we need to call it with, is our own function 139 00:08:53,430 --> 00:08:57,450 ‫that we want to be called whenever the form is submitted. 140 00:08:57,450 --> 00:09:02,190 ‫So let's call that on submit, for example. 141 00:09:02,190 --> 00:09:05,280 ‫So here, this name could be anything. 142 00:09:05,280 --> 00:09:09,963 ‫And now let's pass this here then. 143 00:09:10,920 --> 00:09:14,100 ‫And so it is dysfunction, that React Hook Form 144 00:09:14,100 --> 00:09:17,583 ‫will then call whenever the form is submitted. 145 00:09:17,583 --> 00:09:18,960 ‫So again, 146 00:09:18,960 --> 00:09:22,920 ‫this form gets submitted whenever we click on this button. 147 00:09:22,920 --> 00:09:25,260 ‫So this is pretty normal stuff. 148 00:09:25,260 --> 00:09:28,410 ‫And then we specify an event handle function. 149 00:09:28,410 --> 00:09:31,230 ‫And so that event handler will be the results 150 00:09:31,230 --> 00:09:33,240 ‫of calling this handle submit, 151 00:09:33,240 --> 00:09:35,460 ‫that we received from use form, 152 00:09:35,460 --> 00:09:38,640 ‫with or on submit function. 153 00:09:38,640 --> 00:09:41,793 ‫And so this will then be called with the actual data, 154 00:09:42,840 --> 00:09:46,410 ‫so the data from all the fields that we register it. 155 00:09:46,410 --> 00:09:51,003 ‫And so let's start by logging this data to the console. 156 00:09:52,560 --> 00:09:57,560 ‫All right, so test here, five, 500, discount 100 157 00:10:01,840 --> 00:10:02,940 ‫and then just anything 158 00:10:03,990 --> 00:10:06,720 ‫and here it should actually not be edit but add, 159 00:10:06,720 --> 00:10:07,920 ‫but nevermind. 160 00:10:07,920 --> 00:10:10,110 ‫What matters is that very easily 161 00:10:10,110 --> 00:10:13,290 ‫we got all the data that we wanted 162 00:10:13,290 --> 00:10:16,680 ‫and it was really, really easy, right? 163 00:10:16,680 --> 00:10:20,010 ‫So we didn't have to create any new state variables 164 00:10:20,010 --> 00:10:24,750 ‫and didn't have to attach some event handlers here manually. 165 00:10:24,750 --> 00:10:27,783 ‫All of this just works automatically. 166 00:10:29,040 --> 00:10:31,410 ‫Now here we also have this cancel button 167 00:10:31,410 --> 00:10:34,650 ‫and this simply works because of HTML. 168 00:10:34,650 --> 00:10:39,300 ‫So all we have to do is to specify this type of reset. 169 00:10:39,300 --> 00:10:41,820 ‫And so then this button will simply work 170 00:10:41,820 --> 00:10:45,300 ‫as a reset button and not a submit button. 171 00:10:45,300 --> 00:10:48,903 ‫So again, that's just regular HTML right there. 172 00:10:50,082 --> 00:10:51,510 ‫Now okay, 173 00:10:51,510 --> 00:10:54,990 ‫now this register here can become a bit more complex 174 00:10:54,990 --> 00:10:58,980 ‫by adding some validators and we can then also 175 00:10:58,980 --> 00:11:02,580 ‫handle the results of an error when submitting the form. 176 00:11:02,580 --> 00:11:05,010 ‫But let's leave that for a bit later. 177 00:11:05,010 --> 00:11:06,360 ‫And so next up, 178 00:11:06,360 --> 00:11:09,960 ‫what we're gonna do is to use this data that we receive 179 00:11:09,960 --> 00:11:12,300 ‫in order to actually add a new cabin 180 00:11:12,300 --> 00:11:14,523 ‫to our data on super base.