1
00:00:00,720 --> 00:00:06,310
In the last video we made use of a context object to set up a default value and get that into some nested

2
00:00:06,370 --> 00:00:07,570
child component.

3
00:00:07,870 --> 00:00:11,950
At present we are just console logging out the context value.

4
00:00:11,950 --> 00:00:16,510
Now one thing I want to mention right now is that if you click on these different flag icons up here

5
00:00:16,840 --> 00:00:22,900
you're not going to see the language change however you will see a console log out over here always

6
00:00:22,900 --> 00:00:25,540
of English which is kind of interesting.

7
00:00:25,540 --> 00:00:26,530
So why is that.

8
00:00:26,740 --> 00:00:29,330
Well the answer right now is pretty simple.

9
00:00:29,440 --> 00:00:35,290
If we open up our app component remember that any time that we click on a flag we call on language change

10
00:00:35,380 --> 00:00:38,290
which in turn is going to invoke this dot set state.

11
00:00:38,590 --> 00:00:43,030
Remember that any time that we change the state of a component that component is going to re render

12
00:00:43,180 --> 00:00:46,480
along with all of the components that are shown underneath it.

13
00:00:46,480 --> 00:00:51,190
So at present any time we click on a flag we call set States Asprey renderers.

14
00:00:51,250 --> 00:00:56,710
That is going to cause user create to re render and in turn the user create component is going to cause

15
00:00:56,710 --> 00:01:01,330
our button component to re render as well which results in a console lock.

16
00:01:01,540 --> 00:01:05,380
However the console log is always referencing the this stock contex property.

17
00:01:05,380 --> 00:01:10,990
And at present we do not have any way to change that context value inside the context object because

18
00:01:10,990 --> 00:01:15,130
we wired up a default value when we created the context object.

19
00:01:15,280 --> 00:01:20,110
So at present the value inside the context object is always going to be the string English.

20
00:01:20,110 --> 00:01:22,820
And we do not currently have a way to fix it.

21
00:01:23,390 --> 00:01:25,680
OK so now that brings us up to speed.

22
00:01:25,990 --> 00:01:29,630
So now I want to do a little bit more work on our button dodgiest file.

23
00:01:29,680 --> 00:01:34,450
I'm going to remove the console log right here and then we're going to add in just a little bit of logic

24
00:01:34,450 --> 00:01:39,880
to this thing to change out the value inside of the text or the button itself based upon the current

25
00:01:39,880 --> 00:01:41,640
context value.

26
00:01:41,710 --> 00:01:50,680
So you're going to say Konst checks is going to be this context equals equals equals English.

27
00:01:50,680 --> 00:01:56,860
So if this context is equal to the string English then I want to assign to the value or kimmey to the

28
00:01:56,860 --> 00:02:00,020
variable text the word submit.

29
00:02:00,190 --> 00:02:07,540
Otherwise I want to assign the Dutch word for submit which is I do not remember it off the top of my

30
00:02:07,540 --> 00:02:08,590
head.

31
00:02:08,780 --> 00:02:09,570
Vore leggin

32
00:02:13,170 --> 00:02:17,370
OK so that right there is a Turnier expression which we've used several times throughout this course.

33
00:02:17,430 --> 00:02:22,560
So if the context value holds a string English we're going to say that Textus submit otherwise it will

34
00:02:22,560 --> 00:02:24,050
be for leggin.

35
00:02:24,060 --> 00:02:29,160
So now inside my button tag I'm going to remove that I'll put down some curly braces and I'll reference

36
00:02:29,160 --> 00:02:32,080
text like so OK.

37
00:02:32,320 --> 00:02:37,150
So now our button component should update itself appropriately when ever the value inside the context

38
00:02:37,150 --> 00:02:38,500
object changes.

39
00:02:38,740 --> 00:02:43,740
Let's now open up our field component and do the same thing once we have both the button and the field

40
00:02:43,750 --> 00:02:45,090
wired up appropriately.

41
00:02:45,100 --> 00:02:50,190
We will then figure out how to change the value inside that context object.

42
00:02:50,200 --> 00:02:54,850
So inside my components directory I will open up the fields file and inside of here we're going to go

43
00:02:54,850 --> 00:02:58,930
through the same process that we just went through inside of button at the top.

44
00:02:58,930 --> 00:03:09,600
I will import my language context from dot dot slash contex language context.

45
00:03:09,610 --> 00:03:19,870
Then inside of my class I'll say static context type is language context like so.

46
00:03:19,870 --> 00:03:24,160
So remember this step right here is what forms a link between our class

47
00:03:26,800 --> 00:03:28,240
and the context object.

48
00:03:28,240 --> 00:03:34,370
So now we can reference the value inside the context object with this context from inside of our component.

49
00:03:34,390 --> 00:03:39,130
So we'll now do the same thing that we did just a moment ago inside of button inside the render method.

50
00:03:39,130 --> 00:03:45,370
I will say Konst text equals this context equals equals equals English.

51
00:03:45,700 --> 00:03:50,800
So if context is equal to the string English then I want to have a string name.

52
00:03:50,800 --> 00:03:56,370
Otherwise I want the Dutch word for name which I need to look up again.

53
00:03:56,410 --> 00:03:59,950
It is numb or however it is you pronounce that.

54
00:03:59,950 --> 00:04:03,930
I apologize again Dutch speakers for butchering that word.

55
00:04:03,970 --> 00:04:09,130
All right so now inside of our label rather than always printing out name I will instead printout text

56
00:04:09,850 --> 00:04:12,820
inside of curly braces like so.

57
00:04:12,850 --> 00:04:13,120
All right.

58
00:04:13,130 --> 00:04:14,690
So let's now do a quick test.

59
00:04:14,890 --> 00:04:17,040
I'm going to open up the language context.

60
00:04:17,070 --> 00:04:17,940
Yes file.

61
00:04:17,940 --> 00:04:21,880
And I went to change the default value inside of our context object.

62
00:04:21,880 --> 00:04:25,290
So instead of English I'll say Dutch like so.

63
00:04:26,230 --> 00:04:32,170
Now if I flip back over to my browser I should see Nahm for the label and for leggin for the button.

64
00:04:32,170 --> 00:04:33,170
Cool.

65
00:04:33,850 --> 00:04:38,710
Right now I'm going to change it back to a default of English save it and then I should go back to seeing

66
00:04:38,710 --> 00:04:40,710
name and submit like so.

67
00:04:41,210 --> 00:04:41,490
OK.

68
00:04:41,500 --> 00:04:42,580
So this looks pretty good.

69
00:04:42,580 --> 00:04:48,610
It's now the last thing we have to do is figure out how to change the value inside the context object.

70
00:04:48,610 --> 00:04:53,110
At present we've only learned about using a default value which is only going to set the value inside

71
00:04:53,110 --> 00:04:57,340
of context one time when the context object is first created.

72
00:04:57,340 --> 00:05:00,850
So let's take a quick pause right here and we'll figure out how we can change the value inside that

73
00:05:00,850 --> 00:05:02,780
context object inside the next video.