1 00:00:00,710 --> 00:00:06,310 In the last video we saw the usage of the consumer component to get information out of a Context object. 2 00:00:06,310 --> 00:00:10,650 So remember that is the second way that we can use to get information out of context. 3 00:00:10,650 --> 00:00:15,470 Now the most obvious question about the consumer is why would we use this as opposed to just using this 4 00:00:15,610 --> 00:00:18,390 context which looked a little bit more straightforward. 5 00:00:18,670 --> 00:00:23,490 Well the answer is that we will make use of consumer any time that we want to get information out of 6 00:00:23,610 --> 00:00:30,840 multiple different context objects inside of a single component using this context in conjunction with 7 00:00:30,840 --> 00:00:38,020 that context type property is only used any time we are accessing a single context object inside a component. 8 00:00:38,040 --> 00:00:42,720 So let's think up an example where we might have multiple different contexts objects so we want to get 9 00:00:42,720 --> 00:00:46,080 information from inside of our buttons. 10 00:00:46,080 --> 00:00:49,090 JS file here's my idea. 11 00:00:49,140 --> 00:00:55,230 I think that we should create a second context object called Color context and this will have a value 12 00:00:55,230 --> 00:00:58,830 of a string read if the value is read. 13 00:00:58,860 --> 00:01:04,230 Then we're going to want to have our button style itself as a red button as opposed to the default blue 14 00:01:04,280 --> 00:01:06,020 that it is right now. 15 00:01:06,090 --> 00:01:09,840 So that means that we're going to need to set up a second Context object. 16 00:01:09,840 --> 00:01:15,270 We will set up a second provider and then we'll try to access the second context object inside of the 17 00:01:15,270 --> 00:01:15,820 bun. 18 00:01:16,140 --> 00:01:20,640 And that's going to be in addition to the current language context that we are already accessing inside 19 00:01:20,640 --> 00:01:21,720 there. 20 00:01:21,750 --> 00:01:26,880 So this will be an example where we are trying to access multiple different contexts objects because 21 00:01:26,880 --> 00:01:29,580 we are accessing multiple different contexts objects. 22 00:01:29,580 --> 00:01:32,390 We will have to use the consumer for both of them. 23 00:01:32,400 --> 00:01:37,250 We cannot use this context in this case so let's try this out. 24 00:01:37,350 --> 00:01:40,850 I'm going to flip back over to my code editor and inside my contex directory. 25 00:01:40,860 --> 00:01:44,490 I will make a new file a file called Color context. 26 00:01:44,570 --> 00:01:45,580 Yes. 27 00:01:45,660 --> 00:01:49,750 So inside of year we are going to create a new context object and export it. 28 00:01:49,800 --> 00:01:57,360 So I will import re-act from react and then I will export default re-act not create context like so 29 00:01:58,290 --> 00:02:01,610 now you do not always have to assign a default value if you want to. 30 00:02:01,610 --> 00:02:05,010 You can here by passing it as an argument to create context. 31 00:02:05,010 --> 00:02:09,010 So in this case we might want a default value of like red or something like that. 32 00:02:09,300 --> 00:02:14,610 But just to be clear we are going to set up that provider that's going to stuff a value into the Context 33 00:02:14,670 --> 00:02:15,740 object anyways. 34 00:02:15,930 --> 00:02:20,550 So we don't have to really provide a default value here because we're going to get a value into it by 35 00:02:20,550 --> 00:02:23,190 using that provider. 36 00:02:23,310 --> 00:02:23,570 OK. 37 00:02:23,580 --> 00:02:25,230 So there's our color context. 38 00:02:25,230 --> 00:02:31,980 Now we need to wire this thing up inside of our outdoor J.S. file inside of aptest Yes at the very top. 39 00:02:31,980 --> 00:02:40,500 I will import color context from dot dot slash contex color context. 40 00:02:40,580 --> 00:02:45,280 I'm then going to find my render method where we show user create right here. 41 00:02:45,590 --> 00:02:51,780 So I want to make some data available to the button component that gets rendered inside of user create. 42 00:02:51,800 --> 00:02:56,960 So I'm going to wrap user create with a new color context provider. 43 00:02:57,260 --> 00:03:04,850 It doesn't matter if we put it outside like right here or inside of the language context no difference 44 00:03:04,850 --> 00:03:05,480 either way. 45 00:03:05,540 --> 00:03:10,610 We just need to make sure that we somehow wrap user create with or color context provider. 46 00:03:10,610 --> 00:03:14,980 In this case I will place it outside just for fun no particular reason. 47 00:03:15,290 --> 00:03:21,650 So out here I will place color contacts dot provider and I'll set the value to be read. 48 00:03:21,650 --> 00:03:24,100 So in this case we're going to hard code the value as read. 49 00:03:24,200 --> 00:03:29,390 There's going to be no decision making here on what value we put into the context object. 50 00:03:29,990 --> 00:03:35,800 I'll then close off the color context provider Whoops. 51 00:03:35,830 --> 00:03:36,820 Where's my daughter. 52 00:03:36,870 --> 00:03:42,100 Here it is right there down there and then I'm going to fix up the indentation like so. 53 00:03:42,110 --> 00:03:47,930 So we now have two different context objects that can provide information to the user create in every 54 00:03:47,930 --> 00:03:50,320 single component inside of there. 55 00:03:50,420 --> 00:03:55,050 So I'm not going to save this and then I will open up the button not just file. 56 00:03:55,250 --> 00:04:01,400 Now inside here we want to import the color contex we just created and we're going to use its consumer 57 00:04:01,400 --> 00:04:07,440 component to access the value inside of it and change a class name on the button component right here. 58 00:04:07,490 --> 00:04:13,630 So we if we want to show the button as red we will replace primary with the string red instead. 59 00:04:13,790 --> 00:04:18,470 So if I say that really quickly just as a quick example you'll see the button appears as read over here. 60 00:04:18,470 --> 00:04:23,930 So essentially we want to access that context value and decide either to put in primary or read right 61 00:04:23,930 --> 00:04:25,470 here. 62 00:04:25,520 --> 00:04:35,890 So at the top I'm going to import color context from dot dot slash contex color context and then because 63 00:04:35,890 --> 00:04:40,760 I want to access the value that context object and change some property of the button. 64 00:04:40,870 --> 00:04:44,930 I'm going to wrap the button in this case with color context. 65 00:04:44,950 --> 00:04:50,480 Consumer. 66 00:04:50,500 --> 00:04:52,730 Now here's the part that gets a little bit nasty. 67 00:04:52,750 --> 00:04:58,180 Remember the only child that we passed to a consumer component is going to be a function. 68 00:04:58,180 --> 00:05:03,580 So we now need to pass a function as the only child to this consumer and that function is going to receive 69 00:05:03,610 --> 00:05:05,220 the current value inside of it. 70 00:05:05,230 --> 00:05:10,480 In this case read and then from that function we're going to have to return this entire block of GSX 71 00:05:10,480 --> 00:05:11,640 right here. 72 00:05:11,740 --> 00:05:15,430 So it's going to be a little bit nasty syntax but we can figure it out. 73 00:05:15,460 --> 00:05:20,020 So I'm going to add in a child here that the set of curly braces. 74 00:05:20,020 --> 00:05:24,570 This is going to be a function I'm going to give myself a little bit of space. 75 00:05:25,810 --> 00:05:31,260 And I'm going to cut and paste the button and everything inside of it into that function like so. 76 00:05:35,400 --> 00:05:41,940 So now this function will be called with whatever value is inside of our color context object I could 77 00:05:41,940 --> 00:05:43,490 refer to that argument as value. 78 00:05:43,500 --> 00:05:46,970 But you'll notice we already have a variable inside if you're of value as well. 79 00:05:46,980 --> 00:05:50,670 So just to be a little bit more clear I would probably call this something like color because that's 80 00:05:50,760 --> 00:05:55,810 what we are really receiving here receiving the color that we're supposed to use for our button. 81 00:05:55,830 --> 00:06:02,340 So now I'm going to use a little bit of yes 20:15 syntax to get that color into the class name string 82 00:06:02,340 --> 00:06:03,130 right there. 83 00:06:03,480 --> 00:06:06,270 So I'm going to wrap the thing with curly braces. 84 00:06:06,510 --> 00:06:14,070 I'll then put in a set of tactics around the string and then I will replace primary with Dollar Sign 85 00:06:14,070 --> 00:06:16,320 curly braces color like so. 86 00:06:16,680 --> 00:06:21,420 So we're now taking whatever string is inside of our color context and using it as a class name for 87 00:06:21,420 --> 00:06:22,680 our button. 88 00:06:22,710 --> 00:06:25,650 Let's now save this and see what happens. 89 00:06:27,360 --> 00:06:32,730 So I can refresh the application and I see that I get a button of Samit or a red button right there 90 00:06:33,150 --> 00:06:36,860 and I can still click on the different flags and see the translation as well. 91 00:06:37,170 --> 00:06:42,510 If I go back over to the outtalk J.S. file I can change the value of red right there over to primary 92 00:06:42,720 --> 00:06:46,250 and I will see the button go back over to being blue like it was before. 93 00:06:46,290 --> 00:06:50,670 So you can imagine that if we had like some type of color selector here in addition to the language 94 00:06:50,670 --> 00:06:55,980 selector we could very easily hook up that color selector to our component state and of the Epcot J 95 00:06:55,990 --> 00:07:02,460 s component and have that state property decide either to show the text primary or red or whatever we 96 00:07:02,460 --> 00:07:03,450 need to show. 97 00:07:03,920 --> 00:07:04,210 OK. 98 00:07:04,260 --> 00:07:05,190 So that's pretty much it. 99 00:07:05,190 --> 00:07:09,630 That is how we consume multiple different contexts inside of a single component. 100 00:07:09,630 --> 00:07:14,280 Now as you can see the syntax here is a little bit nasty because we are essentially stacking up these 101 00:07:14,280 --> 00:07:19,140 different consumers and each one needs to have as the only argument a function. 102 00:07:19,380 --> 00:07:21,960 And so like I said yeah gets kind of nasty. 103 00:07:21,960 --> 00:07:26,280 A very easy way to clean this up would be to have this button stuff right here. 104 00:07:26,340 --> 00:07:32,370 The GSX get returned from a helper function so we could make a another helper function inside of your 105 00:07:32,370 --> 00:07:34,620 like render button. 106 00:07:35,430 --> 00:07:38,310 And maybe that would take a color as an argument. 107 00:07:38,400 --> 00:07:47,610 So now I can remove the entire button GSX block into there return it and then inside the arrow function 108 00:07:47,610 --> 00:07:48,270 right here. 109 00:07:49,260 --> 00:07:56,970 I can return that to being just one line like so and call this render button and pass in the color. 110 00:07:57,120 --> 00:08:00,340 And then I can fix up the indentation just a little bit. 111 00:08:00,360 --> 00:08:05,560 So this is a slightly more clear way of doing things rather than having that kind of nasty nested function. 112 00:08:05,640 --> 00:08:09,570 But still you know it can it take a little bit of time to figure out what's going on here. 113 00:08:09,720 --> 00:08:12,760 Let's try saving this really quick and just making sure everything still works. 114 00:08:12,810 --> 00:08:15,050 Yep everything still works if I go back over to Epcot. 115 00:08:15,050 --> 00:08:20,180 J.S. I can change my value to read now and I'll see the red button appear. 116 00:08:20,240 --> 00:08:24,080 All right so that's pretty much it for context at a very basic level. 117 00:08:24,080 --> 00:08:29,240 We've now learned that with the context system inside of react we are sharing information remember that 118 00:08:29,240 --> 00:08:31,820 is the purpose of the context system. 119 00:08:31,820 --> 00:08:37,160 We have two ways of getting information into a context object and two ways of getting information out 120 00:08:37,880 --> 00:08:41,830 when we are getting information out if we are consuming information from a single object. 121 00:08:41,830 --> 00:08:47,890 We can set up the context property by defining that context type on our component class. 122 00:08:48,140 --> 00:08:52,730 Otherwise if we want to consume multiple different context values we have to make use of the consumer 123 00:08:52,880 --> 00:08:55,000 in the same way that we just saw it inside this video. 124 00:08:56,140 --> 00:08:58,900 All right now we have a better idea of how context works. 125 00:08:58,900 --> 00:09:01,820 Let's take a quick pause right here and continue in the next video.