WEBVTT 00:01.790 --> 00:02.440 Okay. 00:02.480 --> 00:11.060 In this video we will be talking about context before I mention communication between the parent and 00:11.060 --> 00:11.780 child. 00:11.780 --> 00:19.520 And we've done that with props so we can pass any information to the child with this props here and 00:19.520 --> 00:26.630 then we can receive it in the in the child and then we can do it in the same way going up like we've 00:26.630 --> 00:27.560 done it here. 00:27.560 --> 00:31.610 So basically this is a very efficient way to communicate. 00:31.610 --> 00:38.060 But sometimes when your application is large, this is not efficient anymore because you might have 00:38.060 --> 00:44.570 a thousands of different components and they are not really necessary one parent to another. 00:44.570 --> 00:51.320 So passing this props might be too much, especially if you have a lot of parent and child. 00:51.320 --> 00:58.430 So let's say we have some information on the top parent and we'd like to pass it down a few components. 00:58.430 --> 01:03.360 So we will need to pass it from the parent to the child, from the parent to the child, and so on and 01:03.360 --> 01:08.340 so on until you will get it in the child you want to receive it. 01:08.340 --> 01:14.580 And sometimes this is not really efficient because you will need to do a lot of steps there. 01:14.580 --> 01:21.690 So React has a new way to do this and it's called context. 01:21.690 --> 01:29.820 So basically what context context is, it's a kind of global state variable that we can keep. 01:30.120 --> 01:38.880 So what we have in context is we create a context and then we have a provider and consumer. 01:38.880 --> 01:45.270 So in the provider we'll just feed the provider with the data and in the consumer we can consume the 01:45.290 --> 01:46.020 data. 01:46.320 --> 01:47.880 So that's how it works. 01:47.880 --> 01:52.110 So basically we can create that context in the top level element. 01:52.110 --> 02:00.330 And we in our case, I will create it in App.js and we can consume that in any of the child that will 02:00.330 --> 02:01.680 wrap around it. 02:01.680 --> 02:03.390 So I will show you that. 02:03.390 --> 02:05.940 But I have to say our application is very small. 02:05.940 --> 02:07.470 I wouldn't do it normally. 02:07.470 --> 02:10.830 I'm just doing that for educational purposes only. 02:10.860 --> 02:16.110 Normally this context shouldn't be used or overused in that way. 02:16.110 --> 02:23.520 It should be only used in a certain situation when you need to have a global variables share in between 02:23.520 --> 02:24.870 different components. 02:25.560 --> 02:28.920 It's not a good idea to have everything there anyway. 02:28.920 --> 02:32.220 Let's see how we can actually work with the context API. 02:33.520 --> 02:35.590 Let's go to the Index.js. 02:35.620 --> 02:40.720 This is our top level React component as we have here. 02:40.720 --> 02:45.670 And this is where we actually render our application to the root. 02:46.480 --> 02:50.710 So let's create a context here, and I will do that here. 02:50.710 --> 02:51.910 So I'll do constant. 02:51.910 --> 02:55.600 I will store my context in a constant and then I can name it. 02:55.600 --> 03:02.620 So I will do const context and then I will do react. 03:04.540 --> 03:07.000 Create context like this. 03:07.240 --> 03:09.310 So this is our context. 03:09.310 --> 03:13.900 And I said that before we can have two things. 03:13.900 --> 03:17.670 We can have a consumer and we can have a provider. 03:17.680 --> 03:22.840 So I can do in the same way we've done it above so I can do const. 03:33.520 --> 03:43.620 And you can see here I'm a consumer and the same way I can do with a consumer, I can do provider. 03:44.320 --> 03:47.470 And then here I will have a provider. 03:47.980 --> 03:49.720 So we have three variables. 03:49.720 --> 03:51.310 I have a variable to context. 03:51.310 --> 03:57.250 And then from the consumer and provider, I use this context from here. 03:57.280 --> 04:02.200 So what I need to do first, I need to have a provider. 04:03.740 --> 04:06.260 To rub some something around it. 04:06.260 --> 04:10.220 So usually you do that in a top level element. 04:10.290 --> 04:12.950 In our case, we have a routing here. 04:12.950 --> 04:20.660 So what I can do is I could wrap everything what's inside here in a provider so I could do this context 04:20.660 --> 04:25.190 provider like here or actually, I don't need that. 04:25.980 --> 04:31.560 Here Since I will be using this provider only in this file. 04:31.560 --> 04:36.180 I can grab this exactly like it is here. 04:36.180 --> 04:38.010 And let's wrap. 04:39.670 --> 04:41.200 This will have a provider. 04:41.200 --> 04:46.510 You can see that's my tag and it will wrap whatever it's here. 04:48.870 --> 04:50.550 Inside provider. 04:50.580 --> 04:58.170 That means if I will have data on my provider, that data will be available anywhere here. 04:58.170 --> 05:00.300 So that will go to the app. 05:00.330 --> 05:02.820 It will go to the header footer and so on. 05:02.820 --> 05:04.470 So let's say we don't have this. 05:04.470 --> 05:10.260 So if that will go to the app app has a header and footer here. 05:10.260 --> 05:14.040 So it will also go down to components and components. 05:14.040 --> 05:21.900 So wherever I would like to use it, once I'll wrap the top element component, it will be available 05:21.900 --> 05:24.120 anywhere down this tag. 05:24.480 --> 05:29.160 So we have a provider and actually I've created here just for you to see it. 05:29.160 --> 05:37.110 But for now I can remove the provider because I have directly use this context provider from here. 05:37.200 --> 05:43.980 So what we actually need to do, let's create some data and I will show you how we can actually access 05:43.980 --> 05:46.260 that and how to create a provider. 05:46.260 --> 05:53.530 What we will do in our example is I will go here in the place where we have actually in the footer. 05:54.820 --> 05:57.460 Let's say we would replace this one. 05:57.460 --> 06:04.120 So we have these animals here and at the moment we use animals from our footer component. 06:04.120 --> 06:09.580 So if we would like to have some kind of information on the top level element and would like to use 06:09.580 --> 06:13.000 it here in that component straight away, so I will show you how to do it. 06:13.000 --> 06:18.430 So I will just copy this and inside index I will have something similar. 06:18.430 --> 06:22.240 So let's say it will be of animals, but this time it will be snake. 06:23.590 --> 06:24.910 Elephant. 06:28.710 --> 06:32.280 And then we can go lion and whatever. 06:32.280 --> 06:36.870 That will be just a different set then what we have in our component. 06:36.900 --> 06:38.550 So we have animals here. 06:38.550 --> 06:45.210 So what we can do and we have to do is we need to feed the provider with some values. 06:45.510 --> 06:47.370 So you can see value here. 06:49.070 --> 06:51.200 And then we pass an object. 06:51.200 --> 07:00.410 So this is the first or the braces are for a triggering JavaScript and the other one will be an object. 07:00.410 --> 07:10.220 So I will name this object property animals, and then I will pass this animals here. 07:10.550 --> 07:15.380 So basically what I'm doing is I'm passing the value for a provider. 07:15.410 --> 07:20.990 This object and this object will have animals and that will be an array of animals. 07:20.990 --> 07:25.070 So at the moment I'm passing this animals to the provider. 07:25.070 --> 07:34.730 That means if any down this provider in any component that will be down in this hierarchy, this animals 07:34.730 --> 07:42.350 might be available, might be because they're not straightaway available, we'll need to use that consumer. 07:42.350 --> 07:50.490 And the reason I put a consumer here in the const because we need to use it from different applications. 07:50.490 --> 07:53.700 So what I will need to do is I will need to export. 07:54.790 --> 07:55.450 This. 07:55.450 --> 08:01.390 So we export this consumer so we can actually import it from other place. 08:01.390 --> 08:06.220 So we'll copy this and let's go to the footer and I will import it here. 08:06.430 --> 08:07.990 So we'll import. 08:13.120 --> 08:18.580 Our consumer from and then we need to go. 08:19.650 --> 08:24.120 One folder up and then index here. 08:24.120 --> 08:31.170 So we have access to our consumer, which is actually this consumer here. 08:31.410 --> 08:32.940 So I can close this for now. 08:32.940 --> 08:38.250 This consumer here is using the context we have here, and this context is also providers. 08:38.250 --> 08:44.910 You can see here, we kind of create a direct link for that context from two different places. 08:45.150 --> 08:53.640 So here we pass the animals and then we need to go to our footer and then we need to create our consumer. 08:53.670 --> 08:58.380 Consumer works in a similar way as we've done with our provider. 08:58.380 --> 09:03.300 So we need to wrap something around it when we want to use it. 09:03.600 --> 09:07.890 So instead of that div, let's use our consumer. 09:07.890 --> 09:14.250 So I will copy this and we can have it like that. 09:17.980 --> 09:23.850 And then what we need to do at the moment, I will just comment this out, not to confuse our code with 09:23.920 --> 09:25.490 whatever we had before. 09:25.510 --> 09:32.680 So what we need to do is we need to have curly brackets and then it will be our function. 09:32.680 --> 09:41.410 So we'll have a context here and then we'll use our arrow function here and then I will have another 09:41.410 --> 09:43.180 curly brackets like that. 09:43.180 --> 09:47.140 And then inside that I have an access to my context. 09:48.470 --> 09:52.640 Which is coming from this consumer. 09:53.240 --> 09:59.060 So once I have an axis here, I can take whatever we had there before. 09:59.060 --> 10:00.980 I will just cut it from there. 10:02.970 --> 10:09.720 And make some more space and then I can inside that function here, I can paste it. 10:10.590 --> 10:20.550 So what we have here is we have animals, but this time animals are not going to come from here. 10:20.670 --> 10:24.600 But I will access the animals from context. 10:26.290 --> 10:27.970 So I will save it now. 10:34.970 --> 10:37.480 And we have some syntax error here. 10:37.490 --> 10:42.650 You actually have to wrap this inside a div. 10:43.700 --> 10:45.980 So we'll have just one element. 10:49.420 --> 10:50.170 Like that. 10:53.120 --> 11:01.640 So it complains about that consumer here and we export this as a consumer. 11:02.090 --> 11:03.620 Let's try to. 11:05.850 --> 11:11.340 Change the name, for example, like that just to trigger a. 11:13.620 --> 11:21.270 So we'll have by default, by convention, we should actually name anything that is kind of used in 11:21.270 --> 11:24.000 attacks by capital letter. 11:24.570 --> 11:26.310 And in fact, this is working. 11:26.310 --> 11:33.060 So that was the thing that whenever we name this, that should be a capital letter here. 11:33.540 --> 11:35.760 I don't know why, but this is how it is. 11:35.790 --> 11:41.750 So when we have that situation, then we can wrap it. 11:41.760 --> 11:44.670 So what we did, I will show you now. 11:44.670 --> 11:49.140 And the important thing is now we can see snake, elephant and lion. 11:49.140 --> 11:55.230 You can see here in the footer we go, we have a loop through animals like we have it before, but this 11:55.230 --> 11:56.640 one is actually commented out. 11:56.640 --> 11:59.550 So at this point I can remove it completely. 11:59.790 --> 12:06.750 And you can see here I still have that printed and this is coming from this index.js. 12:06.750 --> 12:11.610 So we made our first context API working. 12:11.610 --> 12:16.270 So for repeating that again, we created a context. 12:16.510 --> 12:20.020 And then from that context we have done two things. 12:20.020 --> 12:26.530 We've done a provider when we feed the value and this is up to you what you would like to fit in here. 12:27.040 --> 12:34.180 The the important part is that we have object inside and then we feed that inside. 12:34.180 --> 12:41.950 So whatever is in between that and will be in the child child child relationship will have an access 12:41.950 --> 12:42.370 to this. 12:42.370 --> 12:47.790 So we have a value that we can keep it and then it will be available for any child inside. 12:47.800 --> 12:51.940 And then we export also the consumer from that context. 12:51.940 --> 12:57.910 So this is available when we export it, we can import that from any other place and we've done that 12:57.910 --> 12:58.660 in footer. 12:58.660 --> 13:07.930 We just import that and we wrap our component with that consumer and with the arrow function like context. 13:07.930 --> 13:10.810 And from that moment you have an access to content. 13:10.810 --> 13:14.440 Any value on that context and we pass animals. 13:14.440 --> 13:19.960 So we could loop through animals and we put the pass that animals here. 13:19.960 --> 13:27.070 So basically that's how we can share the data in between different components and have a kind of global 13:27.070 --> 13:33.820 state because this is global, will keep everything here and we can communicate it with this and have 13:33.820 --> 13:40.540 an access to that and we don't need to pass it down the road every time we have parent, child, parent, 13:40.540 --> 13:41.710 child, parent child. 13:41.890 --> 13:44.260 So that will be the way to do it. 13:44.260 --> 13:46.600 But as I said, don't overdo it. 13:46.600 --> 13:51.460 This is for only cases to store the global variables, not for everything.