WEBVTT 00:01.650 --> 00:02.310 Okay. 00:02.310 --> 00:08.160 In this video, we will discover how we can actually communicate it back to the parent. 00:08.160 --> 00:13.980 And we'll also learn how to use the events and what the events are. 00:14.190 --> 00:22.200 So what we can do here before we'll move on, I will clean a little bit here, so we'll create just 00:22.200 --> 00:26.550 a tag here in the and I can remove the React fragment. 00:26.880 --> 00:30.630 So we'll have just one H here. 00:30.810 --> 00:39.390 So what we have here is just a simple header and then we can also go to the app and then I can remove 00:39.510 --> 00:40.320 this. 00:40.560 --> 00:46.320 So we have a simplified version of the same application as we had before. 00:46.320 --> 00:50.850 And now let's go to the component here and let's do something else. 00:50.850 --> 00:57.780 So what we can do is it doesn't really matter if we do that in the functional or we can do it in the 00:57.780 --> 00:58.470 class. 00:58.500 --> 01:07.680 What we can do is we can have events and the events are based on the input or based on the interaction 01:07.680 --> 01:08.940 with the users. 01:10.210 --> 01:12.040 So let's go to the footer here. 01:12.040 --> 01:15.580 And this is our class based component. 01:15.580 --> 01:21.970 And inside this H2, what we can do is we can create an event. 01:21.970 --> 01:25.930 So I will inside this h tag. 01:25.930 --> 01:31.060 So let's put this into another line like that. 01:31.060 --> 01:33.760 So we have just one element returned. 01:36.130 --> 01:48.320 And then inside that H2, I can do onClick, which is one of the events available for us on in React. 01:48.340 --> 01:52.810 And basically this is the same as the click on in JavaScript. 01:52.810 --> 01:59.140 So whatever we click on the H2 element, we can trigger a function. 01:59.140 --> 02:04.660 So I will do curly brackets here like that and that means I will run a JavaScript. 02:04.660 --> 02:07.120 So let's create our function first. 02:07.390 --> 02:07.990 I will. 02:09.010 --> 02:10.600 Create a function here. 02:10.930 --> 02:13.390 For example, create alert. 02:14.080 --> 02:15.520 Alert like that. 02:16.450 --> 02:19.360 And that's a simple function inside our class. 02:19.360 --> 02:26.890 So what I can do is I can do this because I'm referring to our class and then I will do create alert. 02:26.920 --> 02:34.840 I don't pass parentheses like this because this will be trigger whenever we render this page, but we 02:34.840 --> 02:39.280 don't want to have it trigger this function whenever. 02:39.280 --> 02:42.760 Whenever we render, we want to have it on click only. 02:42.760 --> 02:46.180 So you do this create alert and then we have this function. 02:46.180 --> 02:50.950 So what we can do inside this function alert, let's say. 02:54.540 --> 02:55.590 Hello. 02:55.620 --> 02:56.520 You clicked. 02:56.550 --> 02:57.720 You clicked. 02:57.960 --> 02:59.370 Me, for example. 02:59.370 --> 02:59.880 Like that. 02:59.880 --> 03:06.840 So what do we have now is we have H2 element and we bind on click to to this and then we trigger this 03:06.840 --> 03:09.060 function which will do alert. 03:09.060 --> 03:13.500 So let's test it Now I will go here and we have our footer. 03:13.500 --> 03:17.820 So I will click it now and you can see here, Hello, you clicked me. 03:17.820 --> 03:21.600 That's the alert that we trigger with our on click. 03:21.600 --> 03:26.640 So basically if you work with events you do on and then name of the event. 03:26.640 --> 03:37.290 In our case it's an event click So what we can actually do as well, we can use this same functionality 03:37.290 --> 03:41.310 as we have here for communicating back to our parent. 03:41.310 --> 03:51.270 So let's come back here to App.js and then we can pass this as a props, but also we can pass the function 03:51.270 --> 03:53.050 as a props as well. 03:53.050 --> 04:00.220 So if I will go back to the footer, I'll close it now with the header and instead of having that function 04:00.220 --> 04:07.930 here, I will take it off and I will put it here inside there. 04:07.930 --> 04:11.260 So we'll do function. 04:13.250 --> 04:15.950 Create alert and then we will alert here. 04:15.950 --> 04:19.580 So this create alert might be. 04:20.970 --> 04:22.470 Passed to. 04:24.490 --> 04:26.980 To this function, to this component. 04:27.010 --> 04:29.710 Like, for example, alert. 04:32.120 --> 04:34.100 Or my alert. 04:36.350 --> 04:39.500 Is equal to whoop. 04:40.160 --> 04:42.370 Create alert like that. 04:42.380 --> 04:46.280 So my alert is reference to this function. 04:46.520 --> 04:52.250 So I will do my alert now and that's a part of the props as well. 04:52.250 --> 04:55.790 So if I go to the footer now and then I can do this. 04:57.540 --> 04:58.500 Props. 04:59.040 --> 05:00.090 And then. 05:01.870 --> 05:02.710 My alert. 05:03.160 --> 05:04.510 My alert. 05:05.470 --> 05:11.110 So what we are doing here on click, I will trigger Pops my alert. 05:11.110 --> 05:14.690 And this my alert is a function. 05:14.710 --> 05:18.010 My alert here, it's a create alert function. 05:18.010 --> 05:23.050 So if I will do this, you can see it is working the same way. 05:23.050 --> 05:27.850 So basically this time I don't trigger the local function from here. 05:27.850 --> 05:36.100 I trigger a function from the parent so I can communicate back to the child, which is passing some 05:36.100 --> 05:41.410 information, and I can also communicate it from the child back to the parent. 05:41.410 --> 05:48.520 So I use the this props the same here, this props and the name of this. 05:49.550 --> 05:53.060 What we pass here and that's referencing back here. 05:53.060 --> 05:59.150 So this is two way communication in between the components child and parent. 05:59.150 --> 06:02.020 And you can do it using the props. 06:02.030 --> 06:04.920 So that's how it is done. 06:04.940 --> 06:13.970 What else we can have instead of onClick, we can have, for example, if we have input, let's say 06:14.000 --> 06:14.690 type. 06:18.230 --> 06:18.950 Text. 06:20.360 --> 06:29.150 And then we'll need to make sure this is just one element returned and we can use the fragment. 06:31.270 --> 06:32.500 Uh, we need to. 06:32.500 --> 06:34.420 Oh, that's inside the return. 06:34.420 --> 06:36.730 So we kind of mess up. 06:36.730 --> 06:40.420 I will just return it here, and then we have return there. 06:40.420 --> 06:41.830 So I will do. 06:43.440 --> 06:44.640 Like that. 06:45.270 --> 06:53.580 So I'll wrap it first and then I will indent it and then I will create a div. 06:53.610 --> 06:57.900 So I kind of doing a lot of things, but I will repeat it in a second again. 06:58.410 --> 07:00.330 So what I did is. 07:02.730 --> 07:03.900 I have returned. 07:03.930 --> 07:09.570 I just return a single element, which is the if I can do reactive fragment, but it doesn't really 07:09.570 --> 07:11.190 matter for us at this point. 07:11.190 --> 07:12.090 This is just easy. 07:12.090 --> 07:16.170 And we have the same H2 with Click as we had it before. 07:16.260 --> 07:23.220 You can see here and also I put import there so I can have more than one elements now and then. 07:23.490 --> 07:25.530 Here I can do on change. 07:27.580 --> 07:31.390 Like that and then I can have another function. 07:31.660 --> 07:33.610 So this. 07:35.160 --> 07:37.470 Changed, for example. 07:37.470 --> 07:41.520 And then this change, we can implement it here. 07:41.520 --> 07:43.380 So that's our function here. 07:45.580 --> 07:48.310 Like that and then I can do console log. 07:52.600 --> 07:56.500 Something like changed here. 07:56.500 --> 07:59.680 So this is I have an input here. 07:59.680 --> 08:07.300 I will open our inspector, our code, I will put it on the bottom like that and I will open console. 08:07.300 --> 08:12.250 So whatever we will change here, we are expecting output there. 08:12.250 --> 08:13.840 So I'm changing. 08:13.840 --> 08:18.460 You see that many times I've changed something and that is trigger. 08:18.460 --> 08:23.020 So you can have different kind of events in your application. 08:23.020 --> 08:27.460 You might have it on click, you might have it on change or you might have it on different one. 08:27.460 --> 08:35.770 Actually, if you start typing on, you can see here a lot of different events are available like on 08:35.770 --> 08:38.710 Mouse up and so on are available. 08:38.830 --> 08:43.840 I just show you the most popular one, which is on Click on Change and so on. 08:43.840 --> 08:47.410 So that's how it is done with the events. 08:47.410 --> 08:52.670 You just put it event on the element and then you refer the function. 08:52.670 --> 08:58.970 You can refer the function with a props to external parent and then you can handle this on the parent 08:58.970 --> 09:04.670 side or you can do it inside this function, inside this class. 09:04.670 --> 09:10.790 If you have functional based components like you have it here, then you do a function outside of this. 09:10.790 --> 09:12.500 So it will be normal function. 09:12.500 --> 09:19.880 But if you use the class like you use it here, you don't use the function keyword, you just name of 09:19.880 --> 09:24.350 the function or the method because the function inside the class is a method. 09:24.740 --> 09:26.660 So you pass it like this. 09:26.660 --> 09:29.510 So we have a few options how to handle this. 09:29.510 --> 09:33.560 And in the next video we'll be talking about State. 09:33.560 --> 09:41.210 Also, I will show you how this kind of setups makes a little bit of problem for passing some values 09:41.210 --> 09:47.930 because we might have a problem to access this inside our function and we'll be talking about it later 09:47.930 --> 09:48.320 on.