WEBVTT 00:01.720 --> 00:02.260 Okay. 00:02.680 --> 00:06.340 Let's talk about props in this video. 00:06.490 --> 00:16.140 So props, it's an essential way in React to pass some information from one component to another. 00:16.150 --> 00:20.440 And basically props are working in relationship parent child. 00:20.440 --> 00:30.280 So if we have some information inside the app, we can pass this information into the our child, which 00:30.280 --> 00:36.310 is whatever it's included in the return here, you can see this is one is embedded in the app. 00:36.310 --> 00:40.030 That means the app is parent and this is child. 00:40.030 --> 00:42.760 And then Heather might have another child. 00:42.760 --> 00:46.750 So basically we can pass props into the child from the parent. 00:46.780 --> 00:48.790 How we can actually do that. 00:48.820 --> 00:54.430 It's really up to us what we would like to pass and how we would like to pass it. 00:54.460 --> 00:57.400 Let's start with our header here. 00:57.400 --> 01:02.120 So we have header and that's normal functional component here. 01:02.120 --> 01:03.410 And this is a header. 01:03.410 --> 01:07.670 Let's say this is a header, we would like to have it dynamic. 01:07.670 --> 01:10.310 So I will go back to the application. 01:10.310 --> 01:16.130 And what we can do is inside this tag, we can include some extra info. 01:16.130 --> 01:20.780 So let's call it info like that. 01:20.810 --> 01:27.320 It is this name, it's whatever we would like to pass it. 01:27.350 --> 01:32.570 We can actually invent this so I can call it info. 01:32.600 --> 01:40.940 I can pass some whatever I like, so I will do equal and then I will do some string. 01:40.940 --> 01:43.850 What I can do here is I can pass a string. 01:43.880 --> 01:49.460 Let's say this is my message like that. 01:49.730 --> 01:53.630 And then what is happening here is into the header. 01:53.630 --> 01:55.130 I'm passing that info. 01:55.160 --> 01:56.540 This is my message. 01:56.540 --> 02:03.500 If I will save it now and then you can see nothing has been changed because I haven't used this in header 02:03.500 --> 02:04.010 yet. 02:04.010 --> 02:10.520 So we're going to header if I would like to use that information that I passed from the app to the header, 02:10.520 --> 02:14.090 I will need to use props like that. 02:14.090 --> 02:19.250 So the function takes the argument of props and this props, I can use it. 02:19.250 --> 02:26.600 So instead of this header here I can use a syntax of a curly brackets like that. 02:26.600 --> 02:32.600 So opening and close and inside this I can run any JavaScript I like. 02:32.600 --> 02:41.900 So in my case I would like to get props and then info which is the name of the variable we made up here. 02:41.900 --> 02:42.950 So info. 02:42.950 --> 02:46.910 So this info info is becoming a props. 02:46.910 --> 02:51.050 And then I have an access to props info here if I will save it. 02:51.050 --> 02:54.440 Now this is my message. 02:54.440 --> 03:01.730 You can see it's not nowhere here printed, but this is the info I'm passing from here. 03:01.730 --> 03:06.380 So if I make it, this is my message. 03:07.130 --> 03:09.940 You can see this is reflected here. 03:09.950 --> 03:13.250 What is more important if I will duplicate this? 03:18.300 --> 03:22.830 If I will change this to something else and I will save it. 03:22.860 --> 03:26.010 You can see this is my message and other info. 03:26.040 --> 03:28.760 That's the same component. 03:28.770 --> 03:37.440 So we use header in both cases, but for both of them I pass different message and I can display that 03:37.440 --> 03:46.170 message here so I can have reusable component and I can change the custom components with that extra 03:46.170 --> 03:48.060 info I'm filling in. 03:48.060 --> 03:51.600 I don't need to limit this to just one. 03:51.600 --> 04:03.930 I can pass more arguments like for example, my number and then I can say my number is six and then. 04:05.430 --> 04:06.810 I'll just copy this. 04:07.050 --> 04:08.260 I'll put it here. 04:08.280 --> 04:15.150 It doesn't really matter if that's on the new line or in the same line, but I make it here because 04:15.150 --> 04:17.190 it will be a more readable. 04:17.370 --> 04:20.010 Once it is inside the stack, it will be parsed. 04:20.010 --> 04:23.410 So I have my number six and then my number four. 04:23.430 --> 04:28.860 Two different numbers and then I can also use that number if I will save it. 04:28.860 --> 04:31.560 Now nothing happens because we just pass it to component. 04:31.560 --> 04:33.630 But this component is not using this. 04:33.630 --> 04:41.760 So if I would like to also display my number, what I have to do is I will show you one problem we have 04:41.760 --> 04:46.920 with React so I can do a H2. 04:48.220 --> 04:50.560 My number is. 04:50.590 --> 04:57.040 And then in the curly brackets, I can do props and then my number. 04:57.040 --> 04:58.320 So this is what I pass. 04:58.330 --> 05:00.070 But we have an error. 05:00.070 --> 05:07.060 So first thing is return by default is just proper to return one line. 05:07.060 --> 05:16.720 So if we would like to return more than one line like that, we need to use parentheses like that and 05:16.720 --> 05:19.060 then wrap it all around it. 05:20.360 --> 05:24.650 Here and then we still have a problem. 05:25.340 --> 05:36.630 You can see here we have an error because the return is prepared to return only one element, HTML element. 05:36.650 --> 05:47.900 So what we could do is we can have div like this and then wrap everything inside in a div and I can 05:47.900 --> 05:49.250 indent it properly. 05:49.490 --> 05:53.540 So you can see here I save it and everything is fine. 05:53.540 --> 05:56.270 So this is my message like that. 05:56.270 --> 06:00.410 This is from the first component component and this is from another component. 06:00.410 --> 06:07.490 So you can see six and four is a different and we pass it to the right, but we need to make sure that 06:07.520 --> 06:13.400 return is will use that parenthesis here and also will return one element. 06:13.400 --> 06:17.060 But that div is also rendered on our page. 06:17.060 --> 06:20.490 So that's great extra element on our page. 06:20.490 --> 06:29.280 So what we might need to do is instead of using this div, we can use the react way, which is react 06:29.280 --> 06:30.270 and then. 06:31.110 --> 06:33.300 Fragment like that. 06:33.300 --> 06:35.520 And then I also need to close it. 06:37.230 --> 06:44.850 So basically what React Fragment does is just create empty container and it's not going to be render 06:44.850 --> 06:45.690 on the page. 06:45.690 --> 06:48.900 It will just wrap this and return it easily. 06:48.900 --> 06:55.440 So instead of div, that div will eventually come to the page and it will create extra container. 06:55.440 --> 06:56.490 We might not need. 06:56.490 --> 07:03.630 That react fragment is not doing this, so it's like returning empty one and it will return only content 07:03.630 --> 07:04.050 of it. 07:04.050 --> 07:05.910 So it's still working as it was. 07:05.940 --> 07:10.080 And you can see here we can return more than one line at a time. 07:10.080 --> 07:14.250 So this is how you use the props with a normal function. 07:14.250 --> 07:18.630 So how can we do the same with our class based? 07:18.660 --> 07:25.170 Basically here, you don't have a way to pass the props, but if you do extend components, the props 07:25.200 --> 07:28.140 are automatically inside our class. 07:28.140 --> 07:31.380 So what we can do here and let's say folder. 07:32.900 --> 07:36.380 And let's say trademark. 07:41.250 --> 07:45.990 Page by Christian or whatever. 07:45.990 --> 07:52.740 So what we are doing here, we are passing another information to the footer and we name that information 07:52.740 --> 07:56.490 as a trademark so we can pass it like that. 07:56.490 --> 08:01.950 And then inside Footer will you can see here that the dot that means this file is not saved. 08:01.980 --> 08:05.130 If I will do command s, I will save the file. 08:05.130 --> 08:07.380 And you can see here everything is updated. 08:07.380 --> 08:16.530 So footer JS and this is my class based component and I could use that instead of this is our footer, 08:16.530 --> 08:26.250 I can use my inside brackets props because there are automatically included and then I hope. 08:28.430 --> 08:33.590 I can do props, Dot, and then I can paste it. 08:33.950 --> 08:36.950 I don't know why this is pasting that for me. 08:38.270 --> 08:42.410 So I will do props like that and then trademark. 08:42.410 --> 08:46.820 But you can see here error because inside we are inside the class. 08:46.820 --> 08:52.280 So if you would like to refer to props, we need to use keyword this. 08:52.310 --> 08:58.520 This refers to the class and then we use from that class props and the trademark, which is something 08:58.520 --> 09:01.400 that we passed in here trademark. 09:01.400 --> 09:07.730 So once I will save it, you can see here Page Christian, this is the trademark that I'm passing to 09:07.730 --> 09:08.660 this component. 09:08.660 --> 09:12.770 So basically this is the way I will clean it up a little bit. 09:12.800 --> 09:19.250 This is the way we can pass information from our parent from one component to another. 09:19.250 --> 09:27.620 We just put any message we like or any number when a piece of data we can pass actually a complex object 09:27.620 --> 09:28.280 as well. 09:28.280 --> 09:31.220 It doesn't have to be a simple string or a number. 09:31.220 --> 09:39.080 We can pass any information from one function to another and then render that or passing even to further 09:39.080 --> 09:40.760 down the chain. 09:40.760 --> 09:47.960 So if the header will have another component here loaded and implemented here, you can pass through 09:47.960 --> 09:51.950 the props later to the to this child as well. 09:51.950 --> 09:57.230 So this is the way we can pass the information around and this is using the props. 09:57.230 --> 10:02.900 So if you have the functional if you have the class based one, the props are already included. 10:02.900 --> 10:06.050 But you need to use the this props syntax. 10:06.050 --> 10:13.310 And if you have the functional one, you need to inject that, pass it as an argument in the function. 10:13.310 --> 10:15.800 So props and then you can name it here.