1 00:00:00,240 --> 00:00:04,380 Once we have covered why we would want to use the context in the first place. 2 00:00:04,560 --> 00:00:10,680 We're going to set up our first context and that is going to be a product context. 3 00:00:11,080 --> 00:00:18,390 So at the moment if we navigate to products J.S. within the context folder we're just gonna have a simple 4 00:00:18,390 --> 00:00:25,140 comment with product context and the way we set up a product context first of all we're going to need 5 00:00:25,230 --> 00:00:26,000 a react. 6 00:00:26,310 --> 00:00:31,020 So I'm gonna set up a function but I can tell you right away that we're going to rename it a bit differently. 7 00:00:31,160 --> 00:00:33,360 So I'm going to use again my basic function. 8 00:00:33,450 --> 00:00:38,310 If you don't like it set up your arrow function but I'm not going to name this product because what 9 00:00:38,310 --> 00:00:44,370 happens with this snippet it essentially creates the function with the same name that we had for the 10 00:00:44,370 --> 00:00:44,920 file. 11 00:00:45,000 --> 00:00:48,490 But in my case I'm gonna name this product provider. 12 00:00:48,720 --> 00:00:54,120 But you're gonna see in a second why we're doing that so we can write product provider or product provider. 13 00:00:54,120 --> 00:00:55,140 Doesn't matter. 14 00:00:55,140 --> 00:01:02,580 I'm gonna go with products provider or you know what let's go with product provider just because I like 15 00:01:02,580 --> 00:01:07,650 it better so product provider and then we need to get our context. 16 00:01:07,770 --> 00:01:09,820 How do we get context from rehab. 17 00:01:09,840 --> 00:01:14,190 Well since we have imported react that's a good start. 18 00:01:14,310 --> 00:01:18,170 Then we can just set up our context using create context method. 19 00:01:18,480 --> 00:01:25,830 So we're going to have some of variable and I'm going to name my product context. 20 00:01:25,920 --> 00:01:27,930 I'm sorry it shouldn't be written like this. 21 00:01:27,990 --> 00:01:36,400 So product context is equal to react dot and then we have a method of create context. 22 00:01:36,420 --> 00:01:41,640 So once we have create context we have access to two components. 23 00:01:41,640 --> 00:01:44,190 One is going to be provider. 24 00:01:44,460 --> 00:01:47,880 And the second one is going to be consumer. 25 00:01:47,880 --> 00:01:54,630 So we're going to use our provider to wrap around our application and then that way we can access it 26 00:01:54,690 --> 00:01:56,490 anywhere in our application. 27 00:01:56,490 --> 00:02:03,420 However we're gonna do a middle step where instead of just using the provider to wrap around our whole 28 00:02:03,420 --> 00:02:08,670 application we're gonna pass it as a return within our product provider. 29 00:02:08,700 --> 00:02:14,540 So we're going to use this component to wrap around our old application and then we're just going to 30 00:02:14,550 --> 00:02:16,230 return our provider. 31 00:02:16,230 --> 00:02:20,630 That's coming from product context as a return and it's gonna make a little bit more sense. 32 00:02:20,730 --> 00:02:26,100 Obviously once we imported within the index J.S. and wrap around our whole application. 33 00:02:26,460 --> 00:02:29,950 So if you're a bit iffy at this point I understand. 34 00:02:29,950 --> 00:02:32,340 Just keep following along and we're gonna get there. 35 00:02:32,340 --> 00:02:37,350 And the second thing that we're getting back from the rehab create context once we assign it to a variable 36 00:02:37,770 --> 00:02:40,520 is a consumer component. 37 00:02:40,530 --> 00:02:47,940 Now I can tell you right away that with an arrival of use context In fact you can just omit the consumer 38 00:02:48,090 --> 00:02:55,380 previously that is before the arrival of used context took we needed to be cute and we either had the 39 00:02:55,380 --> 00:03:01,680 option of sending up the render props or we had an option of using the higher order and component but 40 00:03:01,680 --> 00:03:04,830 with the arrival of use context took. 41 00:03:04,830 --> 00:03:10,160 In fact we can just admit it and then use the context now for to use context. 42 00:03:10,160 --> 00:03:17,700 Look we're going to have to have access to a product context so before that we needed to export to things 43 00:03:17,940 --> 00:03:23,150 the provider which was wrapped within a product provider as well as the consumer. 44 00:03:23,220 --> 00:03:28,770 But now we just need to export the product provider which by the way we're doing that already as a default 45 00:03:29,220 --> 00:03:31,390 as well as the product context. 46 00:03:31,440 --> 00:03:34,950 So that's the reason why I'm going to set this up as a export. 47 00:03:35,400 --> 00:03:39,480 And with all that in place we're gonna change our turn. 48 00:03:39,480 --> 00:03:45,870 Like I said we're gonna use our product provider component to wrap our around our application and what 49 00:03:45,870 --> 00:03:49,230 we're returning is product context. 50 00:03:49,230 --> 00:03:55,320 So that of course is our variable and then like I said we have access to our provider component and 51 00:03:55,320 --> 00:04:01,860 then within the provider component we do need to make sure that we pass in our children because please 52 00:04:01,860 --> 00:04:07,680 keep in mind what we're going to deal with in the next yes we're going to import our product provider 53 00:04:07,680 --> 00:04:12,880 component that is coming off course from the product and we're going to wrap our app. 54 00:04:12,930 --> 00:04:18,900 So if you'd want our functionality to work we need to make sure that in our return we also of course 55 00:04:19,110 --> 00:04:20,490 render the children. 56 00:04:20,580 --> 00:04:24,840 That's the reason why we have product context then we're rendering the children. 57 00:04:24,900 --> 00:04:31,590 And what's really cool about the provider that it has a value prop so we passing the value prop and 58 00:04:31,590 --> 00:04:36,750 then within the value prop we can pass whatever we would want literally whatever you would want you 59 00:04:36,750 --> 00:04:41,310 want to have a string you can pass a string you want to object you can pass in the object in our case 60 00:04:41,300 --> 00:04:45,510 cases we're just going to be using always objects because there's just gonna be more than one name for. 61 00:04:45,960 --> 00:04:53,020 But just to give you a very simple example we can pass in the hello let's save it then like I said we're 62 00:04:53,020 --> 00:04:59,520 going to have to navigate to a index J.S. then we need to make sure that we're importing our product 63 00:04:59,790 --> 00:05:05,520 writer so product provider that is coming from the context. 64 00:05:05,640 --> 00:05:12,330 So let's hop up and let's look for the context and then let's look for the product and then I would 65 00:05:12,330 --> 00:05:16,600 want to wrap my app in my product provider. 66 00:05:16,740 --> 00:05:21,340 So I'm going to wrap my app around with a product provider. 67 00:05:21,450 --> 00:05:28,380 So we're going to go with product provider and let's place the app within our component. 68 00:05:28,430 --> 00:05:32,440 We're gonna save it and nothing changed which is a good thing. 69 00:05:32,450 --> 00:05:34,700 However we obviously would want to test it out. 70 00:05:35,210 --> 00:05:42,140 So I'm going to do is I'm going to head over two pages and I'm going to look for the product page and 71 00:05:42,140 --> 00:05:50,000 then within the product page like I said prior to use context took our options was using the consumer 72 00:05:50,450 --> 00:05:57,470 either that was by setting up a higher order component or that was using the render props which again 73 00:05:57,500 --> 00:05:59,020 wasn't the worst thing ever. 74 00:05:59,030 --> 00:06:02,570 But I mean it could get somewhat easier. 75 00:06:02,780 --> 00:06:08,360 So in this case use context is much more simple option and since it is a hook we need to imported from 76 00:06:08,360 --> 00:06:10,900 react and we have multiple ways that we can do that. 77 00:06:10,910 --> 00:06:17,570 You could add a comment and then just say use context took but to tell you honestly I'd much rather 78 00:06:17,570 --> 00:06:24,650 prefer using react dot and then just using the context I just find it importing it once and then using 79 00:06:24,650 --> 00:06:27,290 somewhere within the component a bit annoying. 80 00:06:27,290 --> 00:06:30,850 So even though you can keep it this way you can use used context. 81 00:06:30,890 --> 00:06:33,480 I'm just going to type react dot use context. 82 00:06:33,620 --> 00:06:37,390 Just please keep in mind that essentially it is exactly the same thing. 83 00:06:37,610 --> 00:06:42,120 And the way it works is we would also need to import our context. 84 00:06:42,120 --> 00:06:44,530 So remember there was two things that we're exporting. 85 00:06:44,600 --> 00:06:47,910 We're exporting the product provider as our default. 86 00:06:48,050 --> 00:06:50,300 And then the second one is a product context. 87 00:06:50,300 --> 00:06:54,630 Now this guy we're not exporting as default since we cannot do that. 88 00:06:54,650 --> 00:06:57,290 We can only have one export default. 89 00:06:57,290 --> 00:06:59,790 So we need to name as our import. 90 00:06:59,840 --> 00:07:09,410 So within a product I'm going to say import then the name is product context context like so and then 91 00:07:09,470 --> 00:07:14,580 we're importing that from where we are we're heading over to the context and then we're looking for 92 00:07:14,580 --> 00:07:15,320 the product. 93 00:07:15,530 --> 00:07:22,210 And now within our component if we would like to access the data that we're passing from our context 94 00:07:22,460 --> 00:07:24,260 well it's actually very simple. 95 00:07:24,260 --> 00:07:30,440 We're just typing here a used context hook and then we provide a product context and I'm going to start 96 00:07:30,440 --> 00:07:33,880 very simply by just console just to understand what is happening. 97 00:07:34,220 --> 00:07:36,410 So we're gonna use react. 98 00:07:36,410 --> 00:07:39,650 Like I said I'm going to use this syntax because I just preferred better. 99 00:07:39,650 --> 00:07:44,750 So I just type in one place use context instead of importing it once and then running it the second 100 00:07:44,750 --> 00:07:50,660 time and then I need to pass in my context whether that's user context whether that's khat context or 101 00:07:50,660 --> 00:07:56,690 whether that's going to be a product context since we have only one man have a product context and now 102 00:07:56,690 --> 00:07:59,240 let's navigate to a product. 103 00:07:59,240 --> 00:08:05,000 And by the way again I muster up and again you guys didn't tell me if we're gonna head over of course 104 00:08:05,150 --> 00:08:14,120 to our bar or header then this should be products some reason I keep skipping this and we have hello 105 00:08:14,120 --> 00:08:20,210 from product page that's not what we're interested in fact what we are looking for is the console and 106 00:08:20,210 --> 00:08:24,440 then within the console I right away have the whole why do I have Hello. 107 00:08:24,620 --> 00:08:30,170 Because when we use the used context took and then we provide the context we're looking for while we're 108 00:08:30,170 --> 00:08:38,210 getting back the data that we passed in within our value like I said string is the most basic value 109 00:08:38,210 --> 00:08:43,940 that we could pass it and just to make things a bit more interesting instead of passing in the simple 110 00:08:44,150 --> 00:08:51,410 string of Hello I'm going to set up a few variables here and we're gonna try to pass our value as an 111 00:08:51,410 --> 00:08:51,950 object. 112 00:08:52,040 --> 00:08:57,580 So the way it's gonna work I'm gonna say cost what's a greeting that is gonna be equal to Hello. 113 00:08:57,680 --> 00:09:00,440 And second one is gonna be some kind of random project. 114 00:09:00,440 --> 00:09:05,810 Some will say product is equal to an object and then of course I'm gonna have some kind of I.D. let's 115 00:09:05,810 --> 00:09:10,790 say 1 and Title is gonna be I don't know some kind of product name. 116 00:09:10,850 --> 00:09:19,670 So product and name and that if I would want to pass my value as a object I just need to set up the 117 00:09:19,670 --> 00:09:20,240 object. 118 00:09:20,300 --> 00:09:25,100 So first I'm going to reference the object and then I'm going to spread the object and then whatever 119 00:09:25,100 --> 00:09:32,050 properties I would want in my object while I could use the fact that in E6 if my property value is going 120 00:09:32,050 --> 00:09:34,570 to match exactly the name that I have for the property. 121 00:09:34,790 --> 00:09:36,050 Can you step in here. 122 00:09:36,050 --> 00:09:37,250 Simple greeting. 123 00:09:37,270 --> 00:09:40,310 Now that is exactly the same as we would type reading like. 124 00:09:40,310 --> 00:09:44,460 So again we're just doing a six shortcut. 125 00:09:44,600 --> 00:09:49,850 So now I'm passing in two things and the moment we're gonna save it you're going to notice that instead 126 00:09:49,850 --> 00:09:51,910 of getting back the hello. 127 00:09:52,040 --> 00:09:56,960 In fact we're getting back the object and then within the object we have two properties we have one 128 00:09:56,960 --> 00:09:59,680 by the name of greeting which has a value of Hello. 129 00:10:00,380 --> 00:10:06,670 And the second one is the object itself and this is the case again where we're gonna use the the structure. 130 00:10:06,680 --> 00:10:12,720 So let's say within the product I know that I would like to access the greeting Maha I'm gonna do that. 131 00:10:12,860 --> 00:10:15,420 I could first get rid of the console log. 132 00:10:15,590 --> 00:10:20,840 Since we already understand what we're getting back and I'm just gonna say that from this object I would 133 00:10:20,840 --> 00:10:27,180 like to structure my greeting similar said Get me greeting from the object that I'm getting back and 134 00:10:27,180 --> 00:10:32,170 then of course somewhere within a page you can just display since it is a variable. 135 00:10:32,340 --> 00:10:36,390 I could just say greeting and then of course I'm going to have a hello from product. 136 00:10:36,600 --> 00:10:41,910 And then this is gonna be my greeting and the same thing of course we can do with a single product that 137 00:10:41,910 --> 00:10:42,780 we passed in. 138 00:10:42,930 --> 00:10:48,270 Just please keep in mind again that in order to set up the context we need to run the methods of create 139 00:10:48,270 --> 00:10:50,380 context that is coming from react. 140 00:10:50,550 --> 00:10:52,290 Then we're getting back three things. 141 00:10:52,290 --> 00:11:00,350 Provider consumer as well as the product context itself and then with an arrival of used context. 142 00:11:00,450 --> 00:11:02,760 In fact we can omit the consumer. 143 00:11:02,760 --> 00:11:07,960 And what we're doing is we're setting up a component that returns our provider. 144 00:11:08,040 --> 00:11:14,910 So instead of heading over and wrapping our whole application with a product context provider we are 145 00:11:15,150 --> 00:11:17,820 passing it as a return from our component. 146 00:11:17,820 --> 00:11:22,230 Now why we are doing that because we're going to set up more complicated logic here on top. 147 00:11:22,710 --> 00:11:28,110 That's the reason why we're using a separate component that in fact just returns our provider. 148 00:11:28,110 --> 00:11:34,320 And then within our provider we have a value prop that can accept anything we would want in our case 149 00:11:34,350 --> 00:11:35,570 we just had some dummy data. 150 00:11:35,580 --> 00:11:41,880 But of course in future videos we're going to set up our product and then within the index we just need 151 00:11:41,880 --> 00:11:48,450 to make sure that we use our component the component we created that returns a product context provider 152 00:11:48,900 --> 00:11:55,230 and then within the component that we'd like to access that data we need to get to things we need to 153 00:11:55,230 --> 00:11:57,930 get used context from react. 154 00:11:57,930 --> 00:12:04,050 And then within the use context we just pass the product complex and then we're gonna get back whatever 155 00:12:04,050 --> 00:12:10,740 we're passing in since we were passing in the object that's the reason why can the structure these properties 156 00:12:10,740 --> 00:12:13,140 that I have passed and has my values.