1
00:00:01,020 --> 00:00:05,760
In the last couple of videos we got some information out of our context object and into our button and

2
00:00:05,760 --> 00:00:07,280
field components.

3
00:00:07,290 --> 00:00:13,110
The only problem right now is that the value inside of our context object is fixed and unchanging.

4
00:00:13,260 --> 00:00:20,010
We can't change that context object value because we initialized it by using a default value the default

5
00:00:20,010 --> 00:00:26,490
value is as you would guess the default value if we want to change the value inside of our Context object.

6
00:00:26,490 --> 00:00:31,800
We have to create a component that is going to act as a source of information for us.

7
00:00:31,800 --> 00:00:33,480
That is the app component.

8
00:00:33,480 --> 00:00:39,060
Our app component knows what the currently selected language is because remember we set up all that

9
00:00:39,060 --> 00:00:41,660
state stuff inside of the app component.

10
00:00:42,090 --> 00:00:48,240
So we now want to communicate some information from the app component into the Context object to do

11
00:00:48,240 --> 00:00:48,630
so.

12
00:00:48,660 --> 00:00:51,360
We're going to create something called the provider component.

13
00:00:51,710 --> 00:00:55,350
This provider thing is not the same provider that we made use of.

14
00:00:55,410 --> 00:01:01,490
Back with back with the re-act redux library remember with reaction redux we had that provider component.

15
00:01:01,650 --> 00:01:03,690
This is a totally different provider.

16
00:01:03,690 --> 00:01:07,060
They just happen to share the same name.

17
00:01:07,170 --> 00:01:12,320
So we're going to use this provider component to update the value inside of our Context object.

18
00:01:12,330 --> 00:01:15,530
I would love to show you a bunch of diagrams to tell you how that is done.

19
00:01:15,600 --> 00:01:20,310
But honestly it's going to be easiest to just write out some code first and then take a look at a couple

20
00:01:20,310 --> 00:01:21,330
of diagrams.

21
00:01:21,540 --> 00:01:25,740
So I'm going to flip on over to my code editor and we're going to write out some code inside of our

22
00:01:25,800 --> 00:01:32,470
app component to take the currently selected language and communicate it down to our context object.

23
00:01:32,610 --> 00:01:40,050
So to do so at the top of this file I'm going to import our language context object from up one directory

24
00:01:40,680 --> 00:01:51,160
contex language context like so then I'm going to find the components or the set of GSX inside of my

25
00:01:51,160 --> 00:01:56,500
render method that need to get some information out of my context object.

26
00:01:56,500 --> 00:02:03,310
In our case the render method has user creates remember user create inside of it shows the button and

27
00:02:03,310 --> 00:02:04,240
the field.

28
00:02:04,270 --> 00:02:09,330
So it's really user create that needs to know some information out of that context object.

29
00:02:09,610 --> 00:02:20,040
So I'm going to wrap user create right here with language context dot provider like so.

30
00:02:20,120 --> 00:02:21,800
All right now I know that looks a little bit weird.

31
00:02:21,840 --> 00:02:24,040
Let's just write out a little bit more code here.

32
00:02:25,180 --> 00:02:31,510
When we render language context not provider we're going to assign a value prop.

33
00:02:31,510 --> 00:02:33,730
Now this is a very special property name.

34
00:02:33,760 --> 00:02:38,440
I did not just make this up off the top of my head as we do with many proper names the proper name of

35
00:02:38,440 --> 00:02:41,580
value is very special to a provider.

36
00:02:41,670 --> 00:02:47,650
So to the value language to pass the value that I want to put inside of my context object.

37
00:02:47,940 --> 00:02:53,130
So this is where I want to communicate some information from my app component and get that value into

38
00:02:53,130 --> 00:02:54,750
the Context object.

39
00:02:54,840 --> 00:03:01,710
In our case the information that we want to communicate from app to the Context object is our state

40
00:03:02,130 --> 00:03:03,700
language property.

41
00:03:03,720 --> 00:03:04,640
This right here.

42
00:03:04,650 --> 00:03:07,960
That is the information that I want to get into my Context object.

43
00:03:08,130 --> 00:03:13,680
So anytime that I change that state language property I want to take that new value and push it into

44
00:03:13,680 --> 00:03:15,040
the provider.

45
00:03:15,060 --> 00:03:22,010
So to do so I'm going to find value right there and then I will assign it this dot state DOT language.

46
00:03:22,050 --> 00:03:22,470
Like so

47
00:03:25,540 --> 00:03:25,900
OK.

48
00:03:26,000 --> 00:03:29,250
So we're going to look at some diagrams to explain exactly what's going on right here.

49
00:03:29,270 --> 00:03:33,070
But first let's flip over to our browser and test this out very quickly.

50
00:03:33,530 --> 00:03:38,080
So back inside my browser I'll do a hard refresh and then I'm going to find the language selector up

51
00:03:38,180 --> 00:03:40,160
at the top and I'll click on the other flag.

52
00:03:40,370 --> 00:03:42,930
And when I do so I should see that new text appear.

53
00:03:43,220 --> 00:03:47,540
And then I built to click on the English flag again or the American flag again and see the English text

54
00:03:47,540 --> 00:03:48,190
appear.

55
00:03:48,190 --> 00:03:53,500
And so now I can freely toggle between the two translations for my form.

56
00:03:53,570 --> 00:03:58,920
So clearly making use of this provider thing got some information or new information into our component.

57
00:03:59,110 --> 00:04:04,300
But of course now let's take a look at a couple of diagrams and figure out what's really going on here.

58
00:04:04,310 --> 00:04:05,480
Actually you know I'll tell you what.

59
00:04:05,510 --> 00:04:09,580
First let's take a quick break and then we'll take a look at a couple diagrams to figure out what exactly

60
00:04:09,590 --> 00:04:10,620
the provider is doing.