WEBVTT 00:00.590 --> 00:06.740 Okay, we have our new component ready for us to use, but we haven't done anything yet to enable the 00:06.740 --> 00:07.100 form. 00:07.100 --> 00:14.780 So what we will do in this video is we will create a form that will accept the user input for updating 00:14.780 --> 00:16.010 this movie. 00:16.010 --> 00:20.390 So we will just straight jump in into our movie form. 00:20.390 --> 00:24.260 At the moment we have this, but we actually don't need it this way. 00:24.260 --> 00:28.880 So how will we need to do is we need to create a kind of form. 00:28.880 --> 00:37.760 So what we can do is I will create a label here and that will be Html4. 00:37.760 --> 00:42.800 And let's say we will have title and this will be title. 00:42.800 --> 00:44.780 So this is a label for my form. 00:44.780 --> 00:51.260 And then I have input and that input will be I will finish that here. 00:51.260 --> 00:53.990 So it will be type of text. 00:54.530 --> 00:58.850 And I can do placeholder here, our title as well. 00:58.850 --> 01:04.370 So that's what we have at the happy moment, then I can actually duplicate this. 01:04.610 --> 01:05.780 I don't need this div. 01:05.810 --> 01:10.370 Duplicate this and I have this one for description. 01:11.450 --> 01:12.770 And actually I need to put. 01:12.800 --> 01:13.760 ID here. 01:13.760 --> 01:21.380 So ID will be title and this one will be ID. 01:23.720 --> 01:27.350 Description like this one. 01:27.350 --> 01:31.160 And I can have a placeholder. 01:31.220 --> 01:32.420 Description here. 01:32.450 --> 01:37.790 So basically what we have here I can actually put it in a two column two column grid. 01:37.790 --> 01:39.770 So I can do class name. 01:39.770 --> 01:44.210 And I can say grid grid columns two. 01:45.140 --> 01:52.940 So if I will go here I should have this this maybe it's not working perfect, but we have uh we need 01:52.940 --> 01:53.870 to fix a few things. 01:53.870 --> 01:58.700 So first thing first this is description like that. 01:58.700 --> 02:02.000 And this might not be input. 02:02.030 --> 02:06.140 It might be a text area like this one. 02:06.140 --> 02:08.870 So it will be a longer text of here. 02:08.870 --> 02:13.190 We don't need to provide the type here because text area is already this one. 02:13.190 --> 02:17.360 So we can actually do some gap here maybe gap of two. 02:17.390 --> 02:20.900 So if I will go here it's looking a little bit better. 02:20.930 --> 02:24.050 Now we have title and then we have a description here. 02:24.050 --> 02:25.970 And then we have labels. 02:26.030 --> 02:28.520 So what is the problem we have now. 02:28.520 --> 02:31.790 At the moment we need to change the movie. 02:31.820 --> 02:34.370 We pass the movie here into that component. 02:34.370 --> 02:37.670 But the problem is that we we can't really change it. 02:37.700 --> 02:44.180 Whatever is coming to the props, this is not how the react works and changing the whatever is coming 02:44.210 --> 02:45.650 here, it's not going to work. 02:45.650 --> 02:53.060 So what we need to do is we need to hold the the current state of the form in our component. 02:53.060 --> 02:57.950 And then whatever we we click on a button, we will do something with that data. 02:57.950 --> 03:01.310 So if we have a title we want to see. 03:01.340 --> 03:07.460 What is the title we we should manage the state of the title here in that component. 03:07.460 --> 03:18.830 So I will do constant and I will have title and set title you state. 03:21.440 --> 03:21.920 Like this. 03:21.950 --> 03:25.040 This this has been imported already and I have a new state. 03:25.040 --> 03:32.390 So this is a this is my variables to set it and I hold it in that component. 03:32.390 --> 03:38.960 But we want to when we click Edit movie we want to get the data and set it directly here in the title. 03:38.960 --> 03:41.690 So what we can do is we already have that movie. 03:41.690 --> 03:47.780 So I can use that movie and title to set the default value. 03:47.810 --> 03:53.690 So this will be my default value there if I will duplicate this and I will do description. 03:56.300 --> 03:58.160 And set description. 04:00.680 --> 04:03.110 And that's going to be description as well. 04:03.110 --> 04:10.400 So I have two different variables that I can hold it in, in the memory here in that component. 04:10.400 --> 04:15.980 So at the moment I'm sending that here I will save it as a default value. 04:15.980 --> 04:17.030 And then I have it there. 04:17.060 --> 04:22.190 So what I need to do is basically I need to pass it as a value to my input. 04:22.190 --> 04:27.800 So I have one input title and I can say value is title. 04:27.830 --> 04:31.220 So this will be binding to this variable here. 04:31.220 --> 04:32.810 And I will do the same here. 04:32.810 --> 04:37.490 So value will be description. 04:37.490 --> 04:43.160 And in that case if I will save it and go back here to my application if I will click on this one. 04:43.190 --> 04:43.850 Edit. 04:44.960 --> 04:51.170 And I think it's there, but it's really hard to see because the what I've done is I have changed the 04:51.200 --> 04:53.750 Y font for an entire application. 04:53.750 --> 05:03.320 What I have to do is maybe I can go here and I can do text Gray, something like that. 05:03.320 --> 05:04.700 I could, I could do blacker. 05:04.700 --> 05:06.440 But I will use the gray. 05:06.470 --> 05:11.450 As you can see here, this is already but basically that's that's gray as well. 05:11.480 --> 05:13.370 But it doesn't matter at this point. 05:13.370 --> 05:15.170 But if I would click this one. 05:16.100 --> 05:27.710 And so if a there is an error now because what is happening is if I go here I haven't actually check 05:27.710 --> 05:28.850 it setting that here. 05:28.850 --> 05:31.910 So I set it at this as a default value. 05:31.910 --> 05:33.200 But this might be a null. 05:33.200 --> 05:36.650 So there might not be a title there available for us. 05:36.650 --> 05:43.040 So what we could do is we could protect our protect ourselves and render only this if we have edited 05:43.040 --> 05:43.490 movie. 05:43.520 --> 05:46.430 So I could do something like this one. 05:46.580 --> 05:50.450 If I have edited movie, then I render this. 05:50.480 --> 05:52.610 Otherwise I'm not going to do anything. 05:52.610 --> 05:56.810 So that will protect me from rendering for having that here. 05:56.810 --> 06:01.620 And I will be sure that whatever we have when we have that movie, then we can trigger. 06:01.620 --> 06:04.200 So if I come back here, that should work. 06:04.200 --> 06:10.980 Now, if I will click on this one, you see I have Titanic and if I will click on this one, it is still 06:11.190 --> 06:12.330 not updated here. 06:12.330 --> 06:14.700 So I could switch to this one. 06:14.700 --> 06:19.020 And you can see this avatar, but we can figure it out later later on. 06:19.050 --> 06:25.380 At the moment, what's important is that if I will click on this one, I will have the data and it will 06:25.380 --> 06:26.070 be available there. 06:26.070 --> 06:35.280 So what we can also do is we can add extra element to our form, and we can have a button like this 06:35.280 --> 06:35.880 one. 06:38.430 --> 06:43.230 And this one will be update movie. 06:44.250 --> 06:46.680 What I want to do is on click. 06:47.880 --> 06:55.350 If I click on that button you could create a form and on this div and then onsubmit do it. 06:55.350 --> 06:57.960 Or you can do it on a on click on the button. 06:57.960 --> 07:01.140 I don't mind because we don't send really any information. 07:01.140 --> 07:02.850 What we want to do is. 07:05.010 --> 07:08.700 Constant save movie. 07:09.900 --> 07:15.120 And it's going to be a function arrow function that we are not going to pass anything to this function 07:15.120 --> 07:16.380 because we don't have to. 07:16.410 --> 07:18.900 So I can do a console log. 07:21.330 --> 07:22.380 And. 07:24.450 --> 07:26.130 Save movie. 07:28.350 --> 07:30.510 Here for example. 07:30.510 --> 07:32.520 So we have that method here. 07:32.520 --> 07:36.540 We don't need to pass anything because we already have the data here in the state. 07:36.540 --> 07:38.790 And I can trigger that from here. 07:38.790 --> 07:42.630 So and I can trigger that with an event here. 07:43.230 --> 07:44.610 And it will be like that. 07:44.640 --> 07:50.190 But if I will click on this button at the moment it's very hard to see. 07:50.190 --> 07:52.020 So maybe I can for now. 07:52.020 --> 07:56.430 We'll fix that in a second, but I will change it maybe for something in the middle. 07:56.430 --> 07:59.280 So gray 500. 08:00.810 --> 08:02.910 So that will put me. 08:03.120 --> 08:05.250 So you will be able to see both of them. 08:05.250 --> 08:08.310 So if I will click on this one and go to. 08:10.410 --> 08:11.700 My console. 08:12.960 --> 08:17.640 And so at the moment if I will go this one and nothing is happening. 08:17.640 --> 08:24.210 So the thing is what we also need to do first is we need to at the moment we put the value here, but 08:24.210 --> 08:26.520 we don't update the value anywhere. 08:26.520 --> 08:31.800 That's what I wanted to show you, but I will need to implement that on change kind of here. 08:31.800 --> 08:39.060 So we pass that movie title here into that variable that we also need to take whatever user is changing 08:39.060 --> 08:43.350 that input and pass it back to that function to to that state. 08:43.350 --> 08:46.950 So what we can do is we have onchange. 08:48.900 --> 08:54.660 So it's a way to capture whatever has been changed and we will take the event from there. 08:54.660 --> 09:00.750 So if we can name it and that will be an arrow function and then we will use that set title. 09:00.780 --> 09:03.120 But what we want to do and send to. 09:03.150 --> 09:06.870 That title is Eve which is that event. 09:06.870 --> 09:11.070 Then target and then value. 09:11.490 --> 09:19.110 So basically from that input when we change something it will be available here in the event in the 09:19.110 --> 09:23.970 target which is this input and the value whatever is in that input. 09:24.000 --> 09:31.290 So if I will copy that and I will put it there and I will do the same on change set not title. 09:31.320 --> 09:35.670 But we want to set the description now like that. 09:35.700 --> 09:39.210 And so I think I have double here. 09:39.210 --> 09:42.420 So we have text area and input two different places. 09:42.420 --> 09:48.930 What we do is we put the value here and whatever we change it, we put it back in that variable in that 09:48.930 --> 09:49.290 state. 09:49.290 --> 09:57.330 So if I will go here, if I will do a tiny something, if I will update movie, and I don't think we 09:57.330 --> 09:58.800 do anything here. 10:00.180 --> 10:09.360 So if I will go back here and we need to trigger that actually that method. 10:09.450 --> 10:14.220 And before actually we will do that, what I can do is I can print more things. 10:14.220 --> 10:17.970 So I will print title and then I will print description. 10:17.970 --> 10:21.810 So going back again here if I will click here. 10:21.810 --> 10:24.660 You see I have that method here. 10:24.660 --> 10:29.070 And then I have Titanic DTD and romantic movies which is from here. 10:29.070 --> 10:33.480 So if I will change it here and click it, you see this is already in my state. 10:33.480 --> 10:36.930 So whatever I change it here, it will be in my state. 10:36.930 --> 10:43.830 So from here I have an app, a access to title and description, and that will be new values because 10:43.830 --> 10:46.140 we already set it here, the value. 10:46.140 --> 10:47.730 And we also captured that value. 10:47.760 --> 10:51.690 Whenever we change a user change it on HTML form. 10:51.690 --> 10:53.460 Then we will set it back to the state. 10:53.460 --> 10:55.650 So this state will be available here. 10:55.650 --> 10:57.510 And we can do something about it.