WEBVTT 00:01.360 --> 00:01.720 Okay. 00:01.800 --> 00:06.200 So in our application, what we have is we already have a way to create new movies. 00:06.200 --> 00:10.640 And that's sent to the database and it is updated in our API. 00:11.000 --> 00:13.240 But at the moment we don't have a way to display that. 00:13.240 --> 00:16.480 We need to fetch a new list from the database and then we can sit there. 00:16.680 --> 00:20.480 So in this video what we will do is we will create that functionality. 00:20.480 --> 00:24.360 So whatever we send that create new movie, we'll have a response back. 00:24.360 --> 00:27.480 And then we will use it to to pass it in our component. 00:27.480 --> 00:31.240 So that will be a good exercise for us to move some data. 00:31.360 --> 00:33.040 So let's go back to our application. 00:33.040 --> 00:39.840 So what we have here in the movie form is when we create that movie, we send it to our API that's coming 00:39.840 --> 00:43.200 back in the response, but we don't do it anything yet with this. 00:43.200 --> 00:46.520 So I will uncomment this. 00:46.520 --> 00:50.480 And when we have that response then we can do a few things. 00:50.480 --> 00:53.560 So at the moment we use before update movie. 00:53.560 --> 00:57.800 So we will need to have a new function that will pass it to our parent. 00:57.800 --> 00:58.720 And I will do. 01:00.960 --> 01:03.280 Add new movie. 01:03.520 --> 01:08.380 So make sure this is new movie here, and then I will trigger that from here. 01:08.660 --> 01:13.220 So we have a new function that is passed in as props here to that component. 01:13.220 --> 01:14.860 So we can go to the parent here. 01:15.220 --> 01:18.380 And when we have that movie form we can implement that here. 01:18.380 --> 01:22.020 So this is the name add new movie that we have it in the component. 01:22.180 --> 01:25.380 And what we can do here is we can trigger that. 01:25.380 --> 01:28.740 So how can we how can we do that. 01:28.900 --> 01:35.660 We kind of name this as a new movie before and we use it in kind of few places. 01:35.660 --> 01:37.620 But this is not actually a new movie. 01:37.620 --> 01:39.140 This is updated movie. 01:39.140 --> 01:43.340 So we could go and correct that or we can use something different. 01:43.460 --> 01:53.220 But our goal here will be to use this name here to pass to the movie list something that we created. 01:53.220 --> 01:55.220 So we already have done a new movie. 01:55.220 --> 01:58.740 Let's correct this just to not being confused. 01:58.740 --> 02:08.550 So I will instead of having that new movie, I will change it for updated movie here And set. 02:10.870 --> 02:13.550 Updated movie. 02:13.590 --> 02:16.590 So basically we will need to have this new movie. 02:16.950 --> 02:18.710 Will be updated movie. 02:23.110 --> 02:28.070 And this will be not set to new movie but it will be set updated movie. 02:28.070 --> 02:31.710 So basically we've changed this reference to updated movie. 02:31.710 --> 02:38.910 So we could now duplicate it and I will have new movie set, new movie. 02:38.950 --> 02:45.390 I kind of repeated that all over again, but I think that will make more sense if you see it this way. 02:45.390 --> 02:50.910 So we have that new variable in the state here, set new movie and we will whatever. 02:50.910 --> 02:54.350 We get that new movie from here, we'll set it into that state. 02:54.350 --> 03:01.550 So once we have that new movie there, what I can do is I can pass that here in the, in the prop. 03:01.550 --> 03:07.270 So movie list here you see this movie I already have new movie. 03:07.270 --> 03:09.270 But we also need to have update. 03:09.270 --> 03:11.390 So we will update that movie. 03:11.770 --> 03:17.490 will have two different versions, so and I will kind of correct it because I need to name change some 03:17.490 --> 03:23.770 names here because I kind of made a little bit mistake naming them wrongly before. 03:23.770 --> 03:34.370 So I will do update it movie it will be updated movie, but this one will be new movie. 03:34.370 --> 03:37.570 So we'll just correct it that in a proper way. 03:37.810 --> 03:44.770 So we will have updated movie and we will have a new movie and whatever we click in the movie form on 03:44.770 --> 03:47.250 Update Movie, then we will set updated movie. 03:47.290 --> 03:50.170 When we click Add New movie, we will set new movie. 03:50.170 --> 03:56.090 And in the movie list we will pass it new movie as a new movie and update the movie as updated movie. 03:56.090 --> 04:01.970 So it's kind of fixing the naming convention for us, but we need to also fix it in few other places. 04:01.970 --> 04:08.730 So in the movie list here, I have that new movie, which is not new anymore, but I will copy that 04:08.890 --> 04:10.330 and I will replace it. 04:10.330 --> 04:17.910 So for the new new movie, we will do something different than then what we will do for updated movie. 04:18.070 --> 04:20.270 So basically updated movie is. 04:23.070 --> 04:23.510 This. 04:23.910 --> 04:30.830 So basically when we have updated movie we will check if the one ID is the updated one and then we replace 04:30.830 --> 04:31.390 it. 04:31.390 --> 04:34.030 And then we will set a new movies like this. 04:34.150 --> 04:35.710 So this is how it was before. 04:35.870 --> 04:40.550 But we've changed the variable in props just to have updated movie here. 04:41.190 --> 04:43.630 So this one is the new one. 04:43.750 --> 04:49.670 So what we are trying to do is we will add a new movie, which is this one. 04:49.990 --> 04:53.510 So it will be trigger only when a new movie has been arrived. 04:53.750 --> 04:56.870 And then what we can do is we can set movies. 04:57.030 --> 05:08.070 And basically what I will do is I will spread new movies into array along with new movie. 05:09.870 --> 05:11.830 And sorry, I can actually do it. 05:13.230 --> 05:16.510 Movies like that. 05:17.190 --> 05:23.720 So if we have a new movie arrived here, and this will be triggered only when we have new movies, what 05:23.720 --> 05:30.840 we can do is we can set new movies and we in the array, we will put all the movies we had before and 05:30.840 --> 05:32.880 we will add an extra new movie there. 05:32.880 --> 05:35.720 So let's save this and test it if that works. 05:35.720 --> 05:36.200 All. 05:36.200 --> 05:41.680 Okay, so if I will have new test and I will go here, I can actually inspect this. 05:41.680 --> 05:44.680 So we will see if we needed to debug this. 05:44.720 --> 05:47.160 At the moment I will clean edit everything here. 05:47.160 --> 05:51.400 So new test here if I will update it. 05:51.440 --> 05:53.120 You can see that's been updated. 05:53.120 --> 05:55.000 So it's working fine as it was. 05:55.000 --> 05:57.320 When I click on this one everything is working fine. 05:57.320 --> 06:01.360 But if I will create a new movie, everything is new here and I created here. 06:01.440 --> 06:04.440 So that will be brand new. 06:06.640 --> 06:12.960 This should be updated automatically like that. 06:12.960 --> 06:14.200 So if I will create it. 06:14.360 --> 06:16.000 You see I have a brand new here. 06:16.440 --> 06:18.320 So if I will click it I have it. 06:18.440 --> 06:19.400 All of it here. 06:19.480 --> 06:25.860 So basically what we have is we have a way to update our components based on different information, 06:25.860 --> 06:26.860 that will pass it. 06:27.020 --> 06:29.380 And it kind of complicated in a way it is done. 06:29.380 --> 06:33.300 But it's more for an exercise than designing your own application. 06:33.580 --> 06:38.860 So what we have is whatever we need to pass information to our parent, we can do it with the props 06:38.860 --> 06:39.660 like this. 06:39.660 --> 06:44.900 And then we can store it in the state, or we can store it in this component, and we can pass it back 06:45.300 --> 06:48.340 to a different component and do something over there. 06:48.380 --> 06:51.220 So in our case, what we've done is we have a trigger. 06:51.220 --> 06:55.260 So whenever we've changed this from props we will update this. 06:55.380 --> 06:57.900 If we change this in props then we will update this. 06:57.900 --> 06:59.340 And it depends on what you do. 06:59.620 --> 07:04.420 You will have that change and send different information to your component. 07:05.820 --> 07:09.380 One error that we see here is in the movie details. 07:09.380 --> 07:13.460 What we have is we have that we need to have a unique key. 07:13.460 --> 07:16.100 So let's correct this one quickly. 07:16.100 --> 07:20.140 I will go here and then we'll go to movie details. 07:20.140 --> 07:22.820 And when we go here. 07:25.870 --> 07:27.350 That's what we have it here. 07:27.350 --> 07:31.430 So when we have that map we'll repeat that five times. 07:31.430 --> 07:35.910 So basically we need to tell what is the element that we are repeating over. 07:35.910 --> 07:37.270 So we return this element. 07:37.270 --> 07:38.590 But we need to give it a key. 07:38.590 --> 07:44.350 So I will have key and then equal to I'll do curly braces. 07:44.470 --> 07:46.270 And for us unique will be index. 07:46.270 --> 07:47.670 So I can put index here. 07:47.950 --> 07:51.590 That means it will be 001234 from there. 07:51.590 --> 07:52.670 And it will be unique. 07:52.670 --> 07:59.390 So if I will go here and then refresh it and then if I clean it click clear it and refresh it. 07:59.390 --> 08:01.550 You see I don't have that error anymore. 08:01.630 --> 08:03.710 So basically that is gone. 08:03.710 --> 08:11.030 So whenever you do a loop with our react and you return something, we need to kind of decorate it with 08:11.070 --> 08:11.590 a key. 08:11.590 --> 08:12.870 So that has to be unique. 08:12.870 --> 08:17.510 And that way react will know that different elements are unique. 08:17.550 --> 08:20.510 You don't have to do this here because you've done it. 08:20.590 --> 08:22.750 We've done it manually one by one. 08:22.750 --> 08:24.710 So it's not rendered by react. 08:24.710 --> 08:28.190 But this is rendered by react using that loop.