‫Now it's time to set up another one
‫of the libraries that I introduced
‫in the lecture where we plant this application.
‫And that library is the React Hook Form Library
‫that we can use to greatly simplify handling forms
‫in real world, React, single page applications.
‫But first of all, let's actually first set
‫up the form in our JSX and in the UI.
‫So the library that we're going to use
‫is really only about handling the form submission
‫and form errors and things like that.
‫So it doesn't give us any prebuilt components.
‫So instead what we have already is the create cabin form.
‫So this component right here
‫and this one does indeed already have some things in here.
‫So we have this form component.
‫So let's move there.
‫Well, for some reason it doesn't want to move there
‫but you can open this file and check it out.
‫And then we have all these other ones.
‫So we have the form row, which you can study.
‫We have a label and we have an error.
‫And so then here we have one form row for each
‫of this data that we need to provide for a new cabin.
‫So this input we actually built two sections ago.
‫And so this one is nothing new.
‫So let's come to our cabin table here
‫and then we will want to display this form below this table.
‫So actually let's not even place it here in the table.
‫So let's leave this one here only for the table itself.
‫And then let's instead come to the actual cabin's page.
‫And then here in this row, let's add a button
‫and that form, and this will all just be temporary
‫because later on we will place this form in a modal.
‫But for now, let's just temporarily do it like this.
‫So I will add a button here.
‫Add new cabin
‫and let's add a piece of state
‫again just temporarily, called show form and set show form.
‫And then use state and start with false.
‫Then here we need to also include this component.
‫And on click, what we want to do as always
‫is to just toggle that show form.
‫So set show form like this.
‫And then here we want the opposite of that.
‫All right.
‫And then here, let's do some conditional rendering.
‫So if show form and create cabin form.
‫So let's see what we get.
‫And, nice.
‫So here we could then also toggle this text
‫but there's no need for that.
‫So we can actually just close this and, all right.
‫So let's close this, close this and come back to our form.
‫And so now it's time to actually set
‫up that React Hook Form Library.
‫So, let's do that, npm install React Hook form.
‫And just to make sure that nothing breaks
‫let's install version seven here.
‫Alright, so notice that we didn't make any
‫of these inputs here, controlled elements.
‫So we don't have a state variable for any of them, right?
‫And we won't need to create one
‫because now we will handle everything
‫about this form using this library that we just installed.
‫And so let me show you how.
‫So we will call the use, form hook.
‫And so this will give us a few functions that we can use.
‫And the most fundamental one is the register function
‫and then also very fundamental as well,
‫is the handle submit function.
‫And later we will use a few more things.
‫But really one of the most fundamental things
‫about React Hook Form, is to essentially register inputs
‫into this hook.
‫So into the form that we are setting up using, use form.
‫And the way that this works is
‫by coming here, entering JavaScript mode
‫and then spread the result of calling register.
‫So this looks very strange, but just roll with it for now.
‫And then here we give it the name of the field.
‫So let's just call it "name"
‫which is exactly the same SDID here.
‫Let's do the same thing here, dot register.
‫And so we are really registering all the inputs
‫into our form.
‫So here this one is called max capacity.
‫And now in order to see what this actually does
‫let's come to our components tree
‫which we haven't seen in a long time.
‫So let's find our form and ah
‫we should then probably open it.
‫Well then we get some problem.
‫So register is not a function
‫and well that's because I don't know how to type.
‫So that's register, not restistger.
‫So I'm guessing this will solve it.
‫Yeah. And so now let's come to our components tree.
‫And apparently it's at the very end.
‫So let's check this input right here.
‫So notice how this gut, these new props here
‫that we actually didn't place there ourselves.
‫So there is no on blur and no on change
‫to be seen on this input field.
‫But now they are here and they have these functions.
‫And so all of this was placed there
‫by React Hook Form simply by us doing this.
‫So basically the results of calling this register
‫will be these props associated with these functions.
‫So this next input should have it as well.
‫So the one with the maximum capacity
‫and then the next one doesn't have it yet.
‫Yeah, because there we didn't call register yet.
‫And so let's do that as well.
‫So just copy that.
‫So regular price.
‫And then here the discount.
‫And notice how on this one we have a default value.
‫So this we used before.
‫And so here it is just to make sure
‫that by default this value is zero.
‫Next up, let's use the description
‫and then we also have this file input field
‫but let's actually leave this one for later.
‫For some reason it's not actually really formatted
‫but we will take care of that later.
‫Alright, and so this was the first step
‫of making React Hook Form work.
‫So always the first step is to register
‫all the input fields
‫that we actually want React hook form, to handle.
‫And then the second part is to specify
‫the on submit form here.
‫And then, as you can guess, here we are going to call
‫that handle submit function
‫that we also received from use form.
‫So handle submit, but here we really need to call it.
‫And what we need to call it with, is our own function
‫that we want to be called whenever the form is submitted.
‫So let's call that on submit, for example.
‫So here, this name could be anything.
‫And now let's pass this here then.
‫And so it is dysfunction, that React Hook Form
‫will then call whenever the form is submitted.
‫So again,
‫this form gets submitted whenever we click on this button.
‫So this is pretty normal stuff.
‫And then we specify an event handle function.
‫And so that event handler will be the results
‫of calling this handle submit,
‫that we received from use form,
‫with or on submit function.
‫And so this will then be called with the actual data,
‫so the data from all the fields that we register it.
‫And so let's start by logging this data to the console.
‫All right, so test here, five, 500, discount 100
‫and then just anything
‫and here it should actually not be edit but add,
‫but nevermind.
‫What matters is that very easily
‫we got all the data that we wanted
‫and it was really, really easy, right?
‫So we didn't have to create any new state variables
‫and didn't have to attach some event handlers here manually.
‫All of this just works automatically.
‫Now here we also have this cancel button
‫and this simply works because of HTML.
‫So all we have to do is to specify this type of reset.
‫And so then this button will simply work
‫as a reset button and not a submit button.
‫So again, that's just regular HTML right there.
‫Now okay,
‫now this register here can become a bit more complex
‫by adding some validators and we can then also
‫handle the results of an error when submitting the form.
‫But let's leave that for a bit later.
‫And so next up,
‫what we're gonna do is to use this data that we receive
‫in order to actually add a new cabin
‫to our data on super base.