WEBVTT 00:00.000 --> 00:00.240 Okay. 00:00.270 --> 00:04.050 In this lesson, we're going to take a look at creating a reusable input. 00:04.050 --> 00:08.580 And the way that we're going to approach this slightly differently to what we did before when we used 00:08.580 --> 00:11.490 the register method from use form. 00:11.490 --> 00:18.120 This is an uncontrolled type of input and is tricky to use if we want something more reusable than what 00:18.120 --> 00:21.630 we use previously with our login form and register forms. 00:21.630 --> 00:23.490 So we're going to use a controlled input. 00:23.490 --> 00:30.270 And if we just take a look at the react hook form documentation and go to the API and take a look at 00:30.270 --> 00:31.290 use form. 00:31.290 --> 00:36.840 Then in order to use a controlled input, then instead of register we need to use the control. 00:37.740 --> 00:42.060 And this does the same thing but makes them controlled inputs. 00:42.300 --> 00:49.620 And inside here they've got a small example of how to use it with a text field that as property doesn't 00:49.620 --> 00:51.960 actually exist, so we can't use that. 00:51.990 --> 00:53.700 We need to render the text field. 00:53.700 --> 00:58.770 But otherwise this is what we're looking at here with a controlled input. 00:58.770 --> 01:05.350 So let's recreate this just so that we can or recreate it for our needs so that we can see how this 01:05.350 --> 01:07.510 works and how verbose this can be. 01:07.510 --> 01:13.270 And then we'll take a look at using a reusable text input to remove some of the boilerplate that we 01:13.270 --> 01:14.710 see inside here. 01:15.340 --> 01:17.140 So we're going to style our form. 01:17.140 --> 01:19.390 So let's just lay out the form as well. 01:19.390 --> 01:22.630 And I'll create a box at the top here. 01:22.630 --> 01:26.980 And this is going to have a component equal to paper. 01:28.300 --> 01:30.550 And we'll give it the property. 01:30.550 --> 01:34.930 And we'll have padding all around of for we'll have max width. 01:37.000 --> 01:38.110 Of LG. 01:39.100 --> 01:45.730 And we'll use Amex Colon Auto to centralize the content on the page. 01:45.730 --> 01:47.410 Then we'll use typography. 01:50.170 --> 01:53.680 And we'll give this a variance of H4. 01:53.680 --> 01:58.060 And we'll give it the CSS property of mx colon four. 01:59.170 --> 02:05.080 And we'll just specify products Details inside here. 02:05.080 --> 02:14.080 And then we'll create a form and we will give our form an Onsubmit method. 02:14.080 --> 02:15.940 So we'll say Onsubmit. 02:16.090 --> 02:20.950 And we'll create a method above here, just as we did before to handle this. 02:20.950 --> 02:24.370 So we'll say const onsubmit equals. 02:24.370 --> 02:27.160 And then in parentheses we'll specify data. 02:27.160 --> 02:30.880 And this is going to use our create product schema values. 02:30.880 --> 02:35.770 We'll add the arrow open curly brackets and we'll just console.log the data for some time. 02:35.770 --> 02:38.140 Actually as we're setting up our form. 02:38.890 --> 02:44.290 And we'll need to bring in the Handlesubmit method from react to form as well. 02:44.290 --> 02:46.870 And instead of register we're going to use that control. 02:46.870 --> 02:49.330 And we'll also use the handle submit. 02:49.330 --> 02:54.850 So inside the form element we'll use the handle submit and pass this. 02:54.850 --> 03:01.930 It's or the Onsubmit function that we created inside the form we're going to use a grids. 03:01.930 --> 03:11.910 So we'll use grids two inside here and we'll make it a container and give it spacing equal to three 03:12.270 --> 03:13.710 inside the grid. 03:13.710 --> 03:17.640 We'll have another grid for the individual elements. 03:17.970 --> 03:21.240 And we'll give this one a size equal to 12. 03:21.270 --> 03:25.470 This input will stretch across the entire width of the form. 03:25.470 --> 03:32.610 And then in order to use a controlled inputs then we use a controller component from react hook form. 03:32.790 --> 03:34.380 We'll add its closing tag. 03:34.380 --> 03:37.050 And inside here we can give it its properties. 03:37.050 --> 03:40.320 So we wish to render a text field inside here. 03:40.320 --> 03:42.240 So we use its render property. 03:42.240 --> 03:48.840 And then inside here we'll destructure the field property from the controller. 03:48.840 --> 03:52.950 So we'll open parentheses then curly brackets then field. 03:52.950 --> 03:54.990 And then we'll add an arrow. 03:55.020 --> 04:01.740 And we're going to effectively render a text field that we get from movie material. 04:01.740 --> 04:03.750 And we'll give this some props as well. 04:03.750 --> 04:12.210 And we'll spread the field properties inside here, much the same way that we would do with our register. 04:12.240 --> 04:17.460 We'll make it full width and we'll give it a label equal to. 04:17.490 --> 04:19.620 For this one it's going to be for name. 04:20.100 --> 04:23.130 And I'll move things down. 04:23.130 --> 04:27.450 And below the render we'll give our field a name. 04:27.450 --> 04:30.000 And the name in this case is going to be name. 04:30.960 --> 04:37.320 And then we specify that the control is going to be control that we get from react hook form. 04:38.790 --> 04:48.090 And then below our grid two and still inside the form we'll add another box. 04:51.240 --> 04:57.870 And we'll give it display of flex and justify content of space between. 05:01.020 --> 05:06.710 And we'll give it the property equal to empty colon column three inside here. 05:06.710 --> 05:16.250 We'll just have a couple of buttons and we'll make it variant of contained and the color equal to inherit 05:16.250 --> 05:17.660 for the first one. 05:19.370 --> 05:23.270 And we'll give it a label of cancel. 05:23.270 --> 05:31.580 And I'll copy this down, change the color to success and we'll give this the label of submit. 05:31.580 --> 05:36.320 And we need to give this the type of submit as well. 05:36.320 --> 05:38.930 So we also need a way of opening our form. 05:38.930 --> 05:40.190 Now we won't create a root for this. 05:40.190 --> 05:43.640 We'll just handle it inside our inventory page. 05:43.640 --> 05:48.290 And we'll use local state to control whether or not the form is going to be displayed. 05:48.290 --> 05:54.170 So I'll specify const edit mode and set edit mode inside here. 05:54.530 --> 05:57.650 And we'll say use state. 05:57.650 --> 06:01.370 And we'll give it an initial value of false. 06:01.370 --> 06:04.880 And then we can check to see if edit mode is enabled. 06:04.880 --> 06:14.010 And if it is we will return our product form and then in the onclick for the create button that we have 06:14.010 --> 06:23.250 here, we'll specify onclick and we will open empty parentheses and use the set edit mode and set it 06:23.250 --> 06:24.270 to be true. 06:25.770 --> 06:35.700 So what we should have now if we go and check our progress and we go back to our application and I'll 06:35.700 --> 06:39.690 just open up the terminal because there is something I want to point out inside here when we do this, 06:39.720 --> 06:45.870 if I click on create, then we've got our product details form and we can see our name property inside 06:45.870 --> 06:46.530 here. 06:46.560 --> 06:50.220 And if I start typing it then it looks like we've got an error. 06:50.220 --> 06:51.930 And what's happening here? 06:51.930 --> 06:56.520 It tells us that a component is changing an uncontrolled input to be controlled. 06:56.670 --> 07:03.900 This is likely caused by the value changing from undefined to a defined value, which should not happen. 07:04.800 --> 07:12.220 So we need to effectively give this a default value so that the input does not start out its life as 07:12.220 --> 07:15.880 undefined when we do anything with this form. 07:15.910 --> 07:19.810 So back to our product form and we can get around this two ways. 07:19.810 --> 07:29.050 We can either specify default values inside here, and then we could specify name as an empty string 07:29.050 --> 07:30.130 in this case. 07:30.160 --> 07:39.250 And if I go back and take a look and refresh this page and click create and start typing in here, then 07:39.250 --> 07:42.370 no warning because we've given it an initial value. 07:42.400 --> 07:44.800 We can also not do it that way. 07:44.800 --> 07:52.090 And inside our controller we can also specify default value here and just give it an empty string. 07:52.090 --> 07:59.800 That way if we go back and refresh the page, then click create and start typing again. 07:59.800 --> 08:00.580 No error. 08:00.580 --> 08:02.560 And we've got our details inside here. 08:02.560 --> 08:10.480 And if we click submit what we should see is the outputted data from this, and if we try and submit 08:10.480 --> 08:13.330 our form so that we can see the data, we get nothing there. 08:13.330 --> 08:20.530 But what we did enable that we still have enabled is we've got our resolver enabled here. 08:20.530 --> 08:24.490 Let's just comment this out for the short term. 08:24.490 --> 08:35.410 And if I submit now and let's just refresh this page and click on create and try and submit. 08:35.440 --> 08:36.880 Now we get the data. 08:36.880 --> 08:40.870 So validation prevents us from clicking on our button. 08:40.900 --> 08:44.650 Or it doesn't stop us clicking it, but it does stop us from seeing the values. 08:44.800 --> 08:47.830 So that's the idea behind controlled forms anyway. 08:47.830 --> 08:54.310 And what we have now is some boilerplate code for our text field. 08:54.520 --> 09:02.140 And the goal really is to not have such boilerplate code and make this more reusable. 09:02.140 --> 09:07.570 So what we'll take a look at in the next lesson is creating a reusable text field so that we can turn 09:07.570 --> 09:09.670 this into a one liner.