Okay.
In this lesson, we're going to take a look at creating a reusable input.
And the way that we're going to approach this slightly differently to what we did before when we used
the register method from use form.
This is an uncontrolled type of input and is tricky to use if we want something more reusable than what
we use previously with our login form and register forms.
So we're going to use a controlled input.
And if we just take a look at the react hook form documentation and go to the API and take a look at
use form.
Then in order to use a controlled input, then instead of register we need to use the control.
And this does the same thing but makes them controlled inputs.
And inside here they've got a small example of how to use it with a text field that as property doesn't
actually exist, so we can't use that.
We need to render the text field.
But otherwise this is what we're looking at here with a controlled input.
So let's recreate this just so that we can or recreate it for our needs so that we can see how this
works and how verbose this can be.
And then we'll take a look at using a reusable text input to remove some of the boilerplate that we
see inside here.
So we're going to style our form.
So let's just lay out the form as well.
And I'll create a box at the top here.
And this is going to have a component equal to paper.
And we'll give it the property.
And we'll have padding all around of for we'll have max width.
Of LG.
And we'll use Amex Colon Auto to centralize the content on the page.
Then we'll use typography.
And we'll give this a variance of H4.
And we'll give it the CSS property of mx colon four.
And we'll just specify products Details inside here.
And then we'll create a form and we will give our form an Onsubmit method.
So we'll say Onsubmit.
And we'll create a method above here, just as we did before to handle this.
So we'll say const onsubmit equals.
And then in parentheses we'll specify data.
And this is going to use our create product schema values.
We'll add the arrow open curly brackets and we'll just console.log the data for some time.
Actually as we're setting up our form.
And we'll need to bring in the Handlesubmit method from react to form as well.
And instead of register we're going to use that control.
And we'll also use the handle submit.
So inside the form element we'll use the handle submit and pass this.
It's or the Onsubmit function that we created inside the form we're going to use a grids.
So we'll use grids two inside here and we'll make it a container and give it spacing equal to three
inside the grid.
We'll have another grid for the individual elements.
And we'll give this one a size equal to 12.
This input will stretch across the entire width of the form.
And then in order to use a controlled inputs then we use a controller component from react hook form.
We'll add its closing tag.
And inside here we can give it its properties.
So we wish to render a text field inside here.
So we use its render property.
And then inside here we'll destructure the field property from the controller.
So we'll open parentheses then curly brackets then field.
And then we'll add an arrow.
And we're going to effectively render a text field that we get from movie material.
And we'll give this some props as well.
And we'll spread the field properties inside here, much the same way that we would do with our register.
We'll make it full width and we'll give it a label equal to.
For this one it's going to be for name.
And I'll move things down.
And below the render we'll give our field a name.
And the name in this case is going to be name.
And then we specify that the control is going to be control that we get from react hook form.
And then below our grid two and still inside the form we'll add another box.
And we'll give it display of flex and justify content of space between.
And we'll give it the property equal to empty colon column three inside here.
We'll just have a couple of buttons and we'll make it variant of contained and the color equal to inherit
for the first one.
And we'll give it a label of cancel.
And I'll copy this down, change the color to success and we'll give this the label of submit.
And we need to give this the type of submit as well.
So we also need a way of opening our form.
Now we won't create a root for this.
We'll just handle it inside our inventory page.
And we'll use local state to control whether or not the form is going to be displayed.
So I'll specify const edit mode and set edit mode inside here.
And we'll say use state.
And we'll give it an initial value of false.
And then we can check to see if edit mode is enabled.
And if it is we will return our product form and then in the onclick for the create button that we have
here, we'll specify onclick and we will open empty parentheses and use the set edit mode and set it
to be true.
So what we should have now if we go and check our progress and we go back to our application and I'll
just open up the terminal because there is something I want to point out inside here when we do this,
if I click on create, then we've got our product details form and we can see our name property inside
here.
And if I start typing it then it looks like we've got an error.
And what's happening here?
It tells us that a component is changing an uncontrolled input to be controlled.
This is likely caused by the value changing from undefined to a defined value, which should not happen.
So we need to effectively give this a default value so that the input does not start out its life as
undefined when we do anything with this form.
So back to our product form and we can get around this two ways.
We can either specify default values inside here, and then we could specify name as an empty string
in this case.
And if I go back and take a look and refresh this page and click create and start typing in here, then
no warning because we've given it an initial value.
We can also not do it that way.
And inside our controller we can also specify default value here and just give it an empty string.
That way if we go back and refresh the page, then click create and start typing again.
No error.
And we've got our details inside here.
And if we click submit what we should see is the outputted data from this, and if we try and submit
our form so that we can see the data, we get nothing there.
But what we did enable that we still have enabled is we've got our resolver enabled here.
Let's just comment this out for the short term.
And if I submit now and let's just refresh this page and click on create and try and submit.
Now we get the data.
So validation prevents us from clicking on our button.
Or it doesn't stop us clicking it, but it does stop us from seeing the values.
So that's the idea behind controlled forms anyway.
And what we have now is some boilerplate code for our text field.
And the goal really is to not have such boilerplate code and make this more reusable.
So what we'll take a look at in the next lesson is creating a reusable text field so that we can turn
this into a one liner.