1 00:00:07,330 --> 00:00:08,500 In this video. 2 00:00:08,500 --> 00:00:14,440 Let's see how we can use the context that we create in the previous video. 3 00:00:14,770 --> 00:00:23,710 So what we are going to do is that we want to access the context data from here inside the component. 4 00:00:23,710 --> 00:00:32,830 A So to achieve that, we need to wrap the context provider with the component that we want to have 5 00:00:32,830 --> 00:00:33,970 access to it. 6 00:00:34,330 --> 00:00:36,850 So let's get to the index. 7 00:00:36,850 --> 00:00:41,290 That is where we are, what rendering the app component. 8 00:00:41,500 --> 00:00:48,280 So any component that we pass in into app, you're are going to have access to it. 9 00:00:48,430 --> 00:00:54,460 But before we come here, let me show you the another way of doing that before coming here. 10 00:00:54,790 --> 00:01:01,600 So APP is going to render other component components A component B. 11 00:01:01,720 --> 00:01:08,440 So here we need component A, so let's require the component A here. 12 00:01:12,690 --> 00:01:16,830 So let's go ahead and then render this component 13 00:01:19,110 --> 00:01:22,110 as component a save it. 14 00:01:22,110 --> 00:01:30,210 And let's say, yes, we have component A, so to be able to access the data inside the off, we need 15 00:01:30,210 --> 00:01:33,570 to wrap with the of provider. 16 00:01:33,960 --> 00:01:38,340 Remember, we have this function inside the context. 17 00:01:38,340 --> 00:01:40,500 We have two functions here. 18 00:01:40,530 --> 00:01:49,470 The first one is a user of context and the second one is the user of provider and this is what we need. 19 00:01:49,470 --> 00:01:57,150 So inside the app, let's bring in the user of provider. 20 00:01:57,150 --> 00:02:00,870 So next thing is I need to wrap this component. 21 00:02:00,870 --> 00:02:09,900 So instead of death, I'm going to use the user of provider and now this one has become the children. 22 00:02:09,900 --> 00:02:16,320 So we inside the user of context, you can see that we are passing in the children and this children 23 00:02:16,320 --> 00:02:18,150 refers to the component. 24 00:02:18,270 --> 00:02:26,790 So with this one, I have access to any data inside the user of provider. 25 00:02:27,180 --> 00:02:33,480 So let's remove this one from here and you can see that it still works. 26 00:02:33,480 --> 00:02:39,330 So now we have the opportunity to access this particular data. 27 00:02:39,330 --> 00:02:41,400 So how are you going to do that one? 28 00:02:41,550 --> 00:02:48,120 So insert a component that is component A, let's see how we can consume that data. 29 00:02:48,420 --> 00:02:57,870 So to consume that, we need to bring in another hook called use contexts and use context is a hook 30 00:02:57,900 --> 00:03:05,100 that help us to use the context data and I have the import as that. 31 00:03:05,370 --> 00:03:09,390 Next is we need what is called the of context. 32 00:03:09,390 --> 00:03:12,750 Remember we have two functions here. 33 00:03:12,870 --> 00:03:16,440 The first one is the user of context. 34 00:03:16,500 --> 00:03:19,170 The second one is the provider. 35 00:03:19,170 --> 00:03:26,580 So to be able to use context, we're going to use the user or context from the instance of the create 36 00:03:26,580 --> 00:03:27,480 context. 37 00:03:27,480 --> 00:03:33,660 So now inside component A, we are going to bring in the user context. 38 00:03:33,660 --> 00:03:37,890 So here is the clear inside component. 39 00:03:37,890 --> 00:03:44,580 We are going to call use context and then we pass in the user of context. 40 00:03:44,790 --> 00:03:54,750 So what comes back contains all the data inside the user of context for this one are assigned to a variable 41 00:03:54,750 --> 00:03:55,770 called user. 42 00:03:56,070 --> 00:04:06,150 So here if I console the log user, now let's check in the browser, let's open the console and here 43 00:04:06,150 --> 00:04:11,430 we can see that we have the object which is the user. 44 00:04:11,580 --> 00:04:16,380 So I can go ahead and then down the user to the DOM. 45 00:04:16,380 --> 00:04:18,600 So let me use H to here 46 00:04:21,300 --> 00:04:28,920 and I will say name is going to be user dot name. 47 00:04:30,900 --> 00:04:32,910 So let's save it. 48 00:04:32,910 --> 00:04:35,790 And you can see that we have, John. 49 00:04:36,090 --> 00:04:44,130 So any component that you want to have access to the data inside our contexts, we are just going to 50 00:04:44,130 --> 00:04:46,680 wrap the provider around it. 51 00:04:47,130 --> 00:04:54,390 So if you want component B, we are just going to import that component and place it inside here. 52 00:04:54,810 --> 00:05:00,270 But by convention or ideally we use the provider root. 53 00:05:00,270 --> 00:05:07,380 So inside the index is where we are going to wrap our provider to the app. 54 00:05:07,380 --> 00:05:09,480 That is the main entry point. 55 00:05:09,480 --> 00:05:15,930 So here I'm going to bring in the user provider and here we go. 56 00:05:15,930 --> 00:05:21,570 So I remove this one and now I have wrap inside my app. 57 00:05:21,720 --> 00:05:28,920 So inside the app I can remove this one and remove this one also. 58 00:05:28,920 --> 00:05:31,410 So if I save it now let's see. 59 00:05:31,410 --> 00:05:34,860 You can see that everything remains the same.