1 00:00:00,780 --> 00:00:02,710 Our application is now looking pretty good. 2 00:00:02,730 --> 00:00:07,800 We have the ability to select a language whenever we select a language by clicking on the flag that 3 00:00:07,830 --> 00:00:11,250 updates the component level state inside of our app component. 4 00:00:11,250 --> 00:00:15,840 We now want to make sure that we can somehow communicate that selection down to our field component 5 00:00:16,020 --> 00:00:19,760 and our button component as well to communicate this information. 6 00:00:19,770 --> 00:00:22,830 We're going to make an use of the context system in this video. 7 00:00:22,830 --> 00:00:27,180 I'm going to tell you a little bit more about how the contest system works in detail and I will write 8 00:00:27,180 --> 00:00:29,650 out some code to make use of it inside of our application. 9 00:00:29,700 --> 00:00:31,520 So let's get to it. 10 00:00:31,530 --> 00:00:33,430 All right so first diagram right here. 11 00:00:33,600 --> 00:00:39,000 As we said many times the context system is all about communicating some information from a parent component 12 00:00:39,060 --> 00:00:40,750 down to a nested child. 13 00:00:40,920 --> 00:00:46,050 In our case our parent component is the app and the nested child that we want to communicate some information 14 00:00:46,050 --> 00:00:53,420 to is both the button and the field components in order to communicate this information. 15 00:00:53,430 --> 00:00:56,310 We're going to create something called a Context object. 16 00:00:56,610 --> 00:00:58,890 You can think of this context object right here. 17 00:00:58,890 --> 00:01:05,370 It's this big arrow as being like a pipe of sorts a pipe that has water moving through it. 18 00:01:05,400 --> 00:01:07,130 In our case we don't have water. 19 00:01:07,140 --> 00:01:08,810 We instead have some data. 20 00:01:09,030 --> 00:01:14,550 So we have some data that is going to move from the top of the pipe and then it's going to flow through 21 00:01:14,670 --> 00:01:19,470 to the very bottom where it can then be consumed by some child component down here. 22 00:01:19,500 --> 00:01:24,660 Now the challenging part about understanding how this context object right here works is understanding 23 00:01:24,690 --> 00:01:27,580 how information gets into the pipe. 24 00:01:27,630 --> 00:01:33,010 So like how we get information into the Context object and how we get information out of it. 25 00:01:33,060 --> 00:01:38,190 If you've ever read the official documentation on the re-act J.S. home page about the Context object 26 00:01:38,460 --> 00:01:44,550 things might seem a little bit confusing and in my opinion it is confusing simply because the documentation 27 00:01:44,550 --> 00:01:49,220 is not clear on how we get information into the pipe and out of it. 28 00:01:49,290 --> 00:01:53,580 So let's clarify how we get information into it and out of it. 29 00:01:54,060 --> 00:01:58,110 In total there are two ways that we can get information into a context object. 30 00:01:58,120 --> 00:02:00,180 We're into this pipe of sorts. 31 00:02:00,360 --> 00:02:05,500 And then there are two ways that we can get information out or out of this pipe of sorts. 32 00:02:05,550 --> 00:02:06,980 So I'm going to show you another diagram. 33 00:02:06,990 --> 00:02:10,800 It's going to look a little bit crazy and it's going to show you the two ways that we can get information 34 00:02:10,830 --> 00:02:14,500 in and it two ways that we can get information out. 35 00:02:15,110 --> 00:02:15,370 OK. 36 00:02:15,390 --> 00:02:17,990 So here's the crazy diagram at the top. 37 00:02:18,000 --> 00:02:23,160 We've got the two ways that we can get information into our pipe so we can refer to these as being like 38 00:02:23,220 --> 00:02:25,140 sources of data. 39 00:02:25,560 --> 00:02:29,940 And then at the bottom are the two ways that we can get information out of the pipe or out of the Context 40 00:02:29,940 --> 00:02:30,620 object. 41 00:02:30,750 --> 00:02:36,810 So these down here are the ways we can use the information that is flowing through that context object. 42 00:02:36,810 --> 00:02:42,150 So to get information into the Context object we can either set up something called a default value 43 00:02:42,450 --> 00:02:49,860 when our context object is created or alternatively inside of our parent component we can create something 44 00:02:49,860 --> 00:02:56,670 called a provider component and this provider component can essentially push information into the Context 45 00:02:56,670 --> 00:02:57,570 object. 46 00:02:57,570 --> 00:03:00,630 So that is how we get information into the Context object. 47 00:03:00,780 --> 00:03:06,170 We can either set up this default value or we can create this provider object. 48 00:03:06,180 --> 00:03:11,730 I'm going to show you examples of both these ways of getting information into the Context object. 49 00:03:11,730 --> 00:03:17,700 Once we once you get some information out of the object we can either reference the context property 50 00:03:17,760 --> 00:03:24,900 inside of a nested child component or inside the nested child we can create a component called a consumer 51 00:03:24,930 --> 00:03:26,430 component. 52 00:03:26,430 --> 00:03:31,500 So that's how we get information out of the Context object either reference the stock context or make 53 00:03:31,500 --> 00:03:33,480 use of this consumer thing. 54 00:03:33,480 --> 00:03:37,980 Again these are the two ways that we get information in in the two ways we get information out of a 55 00:03:37,980 --> 00:03:39,470 Context object. 56 00:03:39,480 --> 00:03:44,250 The reason is that the official documentation is not super clear on this stuff is that there are certain 57 00:03:44,250 --> 00:03:48,990 scenarios in which you will want to use this context in certain scenarios in which you want to use this 58 00:03:48,990 --> 00:03:50,250 consumer thing. 59 00:03:50,280 --> 00:03:52,800 So going to make sure that you really understand the difference between the two. 60 00:03:52,800 --> 00:03:54,540 Once we start writing some code. 61 00:03:54,630 --> 00:03:56,880 So with that in mind let's take a quick pause right here. 62 00:03:56,910 --> 00:04:01,500 When we come back the next section we're going to create our first Context object and then wire it up 63 00:04:01,590 --> 00:04:04,050 to a nested child inside of our application. 64 00:04:04,170 --> 00:04:06,380 So quick pause and I'll see you in just a minute.