WEBVTT 00:02.090 --> 00:08.090 Okay, so we have our movie list displayed here, but we'll optimize it a little bit and we'll add more 00:08.090 --> 00:09.050 things to it. 00:09.050 --> 00:14.540 At the moment we don't need to put a movie list here so I could remove it and we'll change the list. 00:14.540 --> 00:15.950 How to display that here. 00:15.950 --> 00:19.430 So let's go back to our application and that movie list. 00:19.430 --> 00:20.870 I can remove it from here. 00:20.870 --> 00:24.890 And also I want to return more thing for for this movie. 00:24.890 --> 00:27.080 So at the moment we have only one tag. 00:27.080 --> 00:29.360 So it can be on one line. 00:29.630 --> 00:30.200 One line. 00:30.200 --> 00:32.120 But I want to put more data in. 00:32.150 --> 00:36.050 So I will open the braces and close it here. 00:36.050 --> 00:42.770 And in that way I can split it to separate lines and I can include more data inside. 00:42.770 --> 00:46.790 So what we want to do it is we want to wrap it with a div. 00:46.820 --> 00:51.860 So I will do div and I will finish div here. 00:51.860 --> 00:58.670 So inside that div what we need to do is that key needs to be on the parent element. 00:58.670 --> 01:00.350 So I will take this. 01:00.380 --> 01:05.290 This is requirement for requirement for a reactjs. 01:05.320 --> 01:08.530 Whatever we do a map, it needs to know which object is rendered. 01:08.530 --> 01:11.950 So we need to provide something unique and that needs to be on the parent element. 01:11.950 --> 01:17.920 So we have a div that will be unique because we know that ID is coming from our API is unique. 01:17.920 --> 01:19.660 And then we display that here. 01:19.660 --> 01:21.730 So at the moment nothing's really changed. 01:21.730 --> 01:24.220 So if I will save it here, if I will go here. 01:24.220 --> 01:28.900 You see I have a list of movies here as I had it before. 01:29.170 --> 01:34.480 So going back here, what we can do is we can actually make a trigger. 01:34.480 --> 01:40.510 So what we want to do is we want to click onto one of the movies, and then we want to notify our parent. 01:40.510 --> 01:43.150 So which movie has been clicked. 01:43.180 --> 01:44.860 And we can do it in a few ways. 01:44.860 --> 01:47.830 So here I can do onclick. 01:49.300 --> 01:52.300 And that's a function that will be triggered. 01:52.300 --> 01:54.610 So that's a mouse function. 01:54.610 --> 01:57.430 So we can capture the event click. 01:57.430 --> 01:58.300 But we don't have to. 01:58.330 --> 01:59.560 We can leave it empty. 01:59.560 --> 02:04.240 And that means it will trigger whatever it's here whenever we click it. 02:04.240 --> 02:05.590 So that's that's an event. 02:05.590 --> 02:11.150 And then we have an option to do something here, so I will call it movie clicked. 02:12.020 --> 02:15.770 That function will be triggered whenever we click on that. 02:15.800 --> 02:21.320 We could specify that function here and have that movie clicked here. 02:21.320 --> 02:28.100 But in fact we are in we want to have that information here and our parent component. 02:28.130 --> 02:32.240 So at the moment we don't have anything in here. 02:32.240 --> 02:38.330 But I could use state and I can actually store which movie has been clicked. 02:38.330 --> 02:39.980 So I will do that first. 02:39.980 --> 02:45.290 So I will do constant and I will do selected movie. 02:45.950 --> 02:51.290 And also I can do that selected selected movie. 02:51.290 --> 02:53.990 So that will be our state that we will control. 02:53.990 --> 02:56.840 So use state. 02:56.840 --> 03:01.280 If I will click enter it will be automatically imported from from react. 03:01.640 --> 03:05.000 And at the beginning it's null. 03:05.030 --> 03:12.010 So basically we have selected movie variable and we have a way to set up Here, but we don't have a 03:12.010 --> 03:13.270 way to to trigger that. 03:13.270 --> 03:14.890 So here if we will. 03:15.070 --> 03:25.570 Create constant we will create a movie clicked function that will be an arrow function that will accept 03:25.570 --> 03:26.500 movie. 03:29.290 --> 03:36.760 Then we can use set selected movie and use that movie that has been pasted here. 03:37.360 --> 03:43.090 So what we've done here is we have used state variable selected movie. 03:43.090 --> 03:49.120 And when we trigger that movie clicked then we will set it to that variable. 03:49.150 --> 03:50.680 But how can we actually do it. 03:50.710 --> 03:54.940 We are we have it already in the parent class in the in the app.js here. 03:54.940 --> 03:59.140 But what we want to do is we from the movie list, we want to click it. 03:59.170 --> 04:04.330 That means if we have a function like this, we can actually pass it to here. 04:04.330 --> 04:11.170 So I will do movie clicked and in curly braces I can pass any data. 04:11.200 --> 04:15.770 So if I have some data I can pass it here, but this is also like a data. 04:15.800 --> 04:18.530 This is a callback function that we can trigger from there. 04:18.530 --> 04:22.430 So if I will pass it like this, that means movie list. 04:22.460 --> 04:26.840 We will pass that movie clicked reference to that function. 04:26.840 --> 04:31.760 That means if I will go to movie list, I can trigger that from here. 04:31.760 --> 04:36.740 So you see, I have movie clicked and I can do that. 04:36.740 --> 04:43.190 But I need to specify that movie list will actually receive that movie clicked as a prop. 04:43.520 --> 04:50.030 So basically what we are doing is we are passing that reference movie clicked wherever we it will be 04:50.030 --> 04:50.390 trigger. 04:50.390 --> 04:52.070 It will be trigger this function. 04:52.070 --> 05:03.050 And then a will we can actually do console log here and let's say movie title. 05:04.340 --> 05:07.550 So whatever we click it we we should see movie title. 05:07.550 --> 05:11.240 So we pass that reference to that function movie list. 05:11.240 --> 05:14.720 Whatever we click on H2 will trigger that. 05:14.720 --> 05:17.260 And that is passed as a as a prop here. 05:17.260 --> 05:22.060 So if we will save here and go to our application, we have. 05:24.340 --> 05:26.290 Some problems here compiled. 05:28.540 --> 05:34.420 Objects are not valid or for actor child it. 05:34.510 --> 05:36.610 So if I will refresh it. 05:37.540 --> 05:40.210 So this is expecting a assignment to the function call. 05:40.210 --> 05:41.590 So in my bad here. 05:41.590 --> 05:46.900 So basically what I need to do is I need to actually trigger that here. 05:46.900 --> 05:52.690 So whatever we click it I don't store the reference but I need to trigger that function. 05:52.690 --> 05:56.200 And in that function what I need to do is I need to provide some arguments. 05:56.200 --> 05:57.940 So I need to do movie. 05:57.970 --> 06:01.300 So when we click on it that will be an event. 06:01.300 --> 06:08.350 So we can even put event that will be mouse event and that will trigger movie clicked, which is coming 06:08.350 --> 06:10.300 from our props here. 06:10.300 --> 06:13.150 And I will pass a movie reference to it. 06:13.150 --> 06:16.840 And basically if we have more than one, we loop through that. 06:16.840 --> 06:20.330 The current movie that I am clicked will be passed to that function. 06:20.360 --> 06:25.670 That function is registered here and it is passed as an argument in here. 06:25.700 --> 06:28.280 The movie clicked is trigger. 06:28.280 --> 06:31.100 Then that will go here and that will be triggered. 06:31.490 --> 06:35.180 Basically we have the same name here but it doesn't matter. 06:35.180 --> 06:38.300 And then that will be trigger and it will be set in our state. 06:38.300 --> 06:40.490 So let's go back to our application. 06:40.520 --> 06:43.370 Now we don't have that error if I will click it here. 06:43.370 --> 06:47.660 You see I have undefined and here I have undefined as well. 06:47.660 --> 06:50.390 So that means it is not passed properly. 06:50.390 --> 06:56.660 So what I could do is I can go back here and let's try to print everything. 06:56.690 --> 06:58.730 See if we actually can trigger. 06:58.730 --> 07:04.790 So click is working and I think I misspelled it I misspelled that here. 07:05.810 --> 07:08.840 And title yes I did. 07:09.050 --> 07:11.510 So it was titile I haven't noticed. 07:11.510 --> 07:17.360 But if I will trigger if I will um, console log everything you can see here. 07:17.360 --> 07:20.360 If I click on Titanic I have data for Titanic. 07:20.360 --> 07:23.470 If I click on avatar, I have data for avatar. 07:23.470 --> 07:25.150 So for sorry for that. 07:25.180 --> 07:34.780 That means what we've done here is we set selected movie and we store it here in the parent component. 07:34.810 --> 07:38.560 So from here we just select a list of movies. 07:38.560 --> 07:43.420 And we have a way to tell notify our parent through props to trigger that. 07:43.420 --> 07:45.400 And we still have that variable here. 07:45.400 --> 07:49.570 That means we can from here send it to another component if needed. 07:50.320 --> 07:52.090 So I can remove for now. 07:52.450 --> 07:54.580 And this and we have it set up. 07:54.580 --> 07:59.260 So whatever you need to pass some information to component you can do it with a props. 07:59.260 --> 08:00.730 It doesn't have to be a function. 08:00.730 --> 08:06.700 If you will load some data here you can pass that data there in the component you need to. 08:06.730 --> 08:11.170 In the curly braces, specify what data you are passing and you can use it. 08:11.170 --> 08:19.270 So our function here, it's just as any normal um variable here because that's an arrow function. 08:19.270 --> 08:21.940 So we can actually trigger that from anywhere. 08:21.940 --> 08:24.610 And it will be triggered in our parent.