WEBVTT 00:01.910 --> 00:08.810 Okay, we have our list of movies displayed there and we capture actually whatever which one is has 00:08.810 --> 00:09.350 been clicked. 00:09.350 --> 00:11.510 So in here we have selected movie. 00:11.510 --> 00:15.290 So now it's a good time to introduce a new component. 00:15.290 --> 00:16.790 So we have a movie list now. 00:16.790 --> 00:20.030 And we will create a new component that will be movie details. 00:20.030 --> 00:22.310 So let's create that here. 00:22.400 --> 00:30.170 Right click new File and I will do movie details JSX x here. 00:30.170 --> 00:34.970 And basically just to speed things up I can open movie list and I can copy everything. 00:34.970 --> 00:37.850 And I would movie details and I will put put it there. 00:37.880 --> 00:47.240 At the moment we let's clean it up and I will remove most of the things in a component here like that. 00:48.620 --> 00:54.080 And we will have movie the details component. 00:54.110 --> 00:57.560 So basically I have a fresh new component, new component. 00:57.560 --> 00:59.210 And I can display that here. 00:59.210 --> 01:04.930 So let's say I will have H1 and I will do movie details. 01:05.320 --> 01:09.100 Component and component. 01:09.250 --> 01:11.140 So basically that's what I will render. 01:11.170 --> 01:13.330 I will go to my parent which is app.js. 01:13.360 --> 01:16.780 And in the same way as we've done it here we need to import that. 01:16.780 --> 01:20.440 So import movie details. 01:20.440 --> 01:22.510 And that will auto complete for me. 01:22.510 --> 01:26.020 So movie details has been imported from components movie details. 01:26.020 --> 01:27.760 So I will go here. 01:27.760 --> 01:36.790 And instead of displaying that H1 I can do movie details and finish that with a closing that tag. 01:36.790 --> 01:38.020 So I will save it. 01:38.050 --> 01:39.460 Go back to application. 01:39.460 --> 01:42.670 You see this is rendered in my component now. 01:42.700 --> 01:49.870 So what we want to do is we will whatever we click on this and we store it in our app.js state, we 01:49.870 --> 01:51.640 can pass it to another component. 01:51.640 --> 01:53.170 And that's what we will do. 01:53.200 --> 01:56.500 So I will go here inside the movie details. 01:56.500 --> 02:00.310 What I can do is I can pass some data so I can pass movie. 02:00.370 --> 02:02.470 I can name it whatever I like. 02:02.500 --> 02:06.430 And what I need to pass is I need to pass that selected movie. 02:06.430 --> 02:09.160 So selected movie will come from here. 02:09.160 --> 02:15.010 It will be safe in state and we will pass it to another component there. 02:15.010 --> 02:18.130 So this time we refer this as a movie. 02:18.130 --> 02:20.890 But in our component here is selected movie. 02:20.920 --> 02:22.480 You can name it as you like. 02:22.480 --> 02:25.810 But the first bit here is that what is going as a prop. 02:25.810 --> 02:29.500 So this is movie that what we will use in our component. 02:29.530 --> 02:30.700 So we will save it. 02:30.700 --> 02:33.190 And if I will go to movie details. 02:33.190 --> 02:42.340 So from here what I could do is I could display that in um here in that component so I can remove this. 02:42.340 --> 02:52.720 And I could have curly braces and I can do movie and I can display for example, title, but this can 02:52.720 --> 02:54.190 go as null. 02:54.190 --> 02:59.920 So if I will go back to the beginning, if I will refresh this, this will give me an error, because 02:59.920 --> 03:03.580 I'm trying to display a title of something that is by default null. 03:03.580 --> 03:07.620 So if I go here you see selected movie when you start the application. 03:07.620 --> 03:08.220 This is no. 03:08.220 --> 03:09.720 And that's what I'm passing here. 03:09.720 --> 03:11.190 So we need to actually check it. 03:11.190 --> 03:14.130 If we have that movie there's a few ways to do it. 03:14.130 --> 03:18.510 I could do a check here if movie. 03:21.180 --> 03:21.960 Like that. 03:21.960 --> 03:27.480 If movie then returns something, I could check if I have the movie and return something here or. 03:27.480 --> 03:31.350 But it will still, I will need to do some check checking here. 03:31.350 --> 03:37.320 So if I could do kind of check property, check if I have the movie available. 03:37.320 --> 03:41.490 So if movie and then I can do end end. 03:41.520 --> 03:44.820 That means it will trigger this only when this is available. 03:44.820 --> 03:50.550 So in JavaScript when we do syntax like this, every single bit of code will be checked first. 03:50.550 --> 03:54.150 If one of these fail, then another one is not going to be triggered. 03:54.150 --> 03:57.390 So if there is no movie, the movie title is not going to trigger. 03:57.390 --> 04:02.790 So if I will go here and I don't have that error anymore, so what I can do is click here. 04:02.820 --> 04:05.370 Titanic and Avatar, Titanic and avatar. 04:05.400 --> 04:06.930 So you see this is working. 04:06.930 --> 04:12.810 So we have that check already here so we can check if we have movies, then do we display title? 04:12.810 --> 04:21.510 What I could do is I can duplicate this and we can also display a description description here. 04:21.510 --> 04:26.220 And let's say I will put it as a paragraph a paragraph here. 04:26.550 --> 04:33.660 And so if we'll have this back again you can see here I can click on this one and this one. 04:33.660 --> 04:36.150 And I have both title and description. 04:36.180 --> 04:37.320 Actually I don't like the style. 04:37.350 --> 04:41.640 Everything is styled as a a as a header here. 04:41.640 --> 04:49.530 So if I will go to app CSS I think I have a for app header font size. 04:49.650 --> 04:51.840 This this is way too big. 04:51.840 --> 04:53.850 I will just remove it from there. 04:53.850 --> 05:00.240 And if I will go here you can see it's much smaller but everything is much smaller. 05:00.240 --> 05:07.410 So if I will go back here and go back up header, everything is actually in the header here. 05:07.410 --> 05:14.630 So what we could do is we can get this away from here and put it outside. 05:14.660 --> 05:15.140 Header. 05:15.170 --> 05:17.630 Header will be with that styling here. 05:17.630 --> 05:20.480 So it's fine for header but not for everything else. 05:20.480 --> 05:23.390 So if I go here it is much much better. 05:23.420 --> 05:25.610 We will do some styling later on. 05:25.640 --> 05:32.180 I will actually can make it a little bit bigger for you to see, but we can still use it the same way 05:32.180 --> 05:33.260 as we've done before. 05:33.260 --> 05:35.570 So we have the data displayed there. 05:35.570 --> 05:43.160 I can go back to my code and I can close this for now and go to the movie details. 05:43.160 --> 05:47.120 But what we are doing here is basically we've checked the movie twice. 05:47.120 --> 05:49.040 If that exists, it doesn't really. 05:49.070 --> 05:50.870 It's not a good way to to do it. 05:50.900 --> 05:53.630 What we could do is we can have a div. 05:55.730 --> 05:56.570 Here. 05:56.690 --> 06:00.350 And inside that div I can check if we have that movie. 06:03.200 --> 06:04.550 So like that. 06:04.550 --> 06:08.300 And also I can close it like that. 06:08.300 --> 06:10.550 So basically I'm checking here. 06:10.550 --> 06:13.520 If I have a movie then I will display that diff. 06:13.520 --> 06:19.310 So in that case I can put it everything inside here in that diff. 06:19.310 --> 06:27.770 And I can remove this because I will be pre-checking if that movie exists here, and then display that 06:27.770 --> 06:29.120 in the diff inside. 06:29.120 --> 06:31.220 Otherwise I'm not gonna do this. 06:31.220 --> 06:33.860 So I will make it a little bit clear. 06:33.860 --> 06:35.480 So I'm checking if I have a movie. 06:35.480 --> 06:36.890 Then I will display this. 06:36.890 --> 06:42.710 So I don't need to check in the movie for every single thing I will use inside. 06:42.710 --> 06:48.590 So if I would go back here, we actually refresh it and I can see everything is working the same as 06:48.590 --> 06:49.640 it was before. 06:49.850 --> 06:52.490 So this is already done. 06:52.490 --> 07:00.830 What we've done in this video is we take the selected movie, we pass it, pass it as a param parameter 07:00.830 --> 07:06.230 here as a props into our new component and a new component, we check it. 07:06.260 --> 07:13.010 We receive that movie here, we check it if that exists, and then we display title and description.