1
00:00:00,720 --> 00:00:05,690
In the last video we saw that making a new provider creates a separate pipe of information.

2
00:00:05,800 --> 00:00:11,550
So we put down two providers and each user creates got a different value over the Context object.

3
00:00:11,590 --> 00:00:16,660
If we then placed a user create without any provider wrapping it it only got the default value.

4
00:00:16,730 --> 00:00:20,650
So now that we have a better idea of how the provider behaves we're gonna start to look at one last

5
00:00:20,650 --> 00:00:22,280
feature around context.

6
00:00:22,280 --> 00:00:26,290
I'm going to first begin by cleaning up the extra provider in user create that we had placed inside

7
00:00:26,290 --> 00:00:28,920
of our apt on file file OK.

8
00:00:28,940 --> 00:00:33,480
So I'm left with just the value coming from this state Delta language right here.

9
00:00:33,540 --> 00:00:37,910
The last thing we're going to take a look at around context is the second way of getting information

10
00:00:37,970 --> 00:00:40,220
out of this pipe of sorts.

11
00:00:40,220 --> 00:00:43,500
We've already taken a look at the first way of getting information out.

12
00:00:43,520 --> 00:00:48,410
We saw that we could set up that contex type property and then we got access to our data on that property.

13
00:00:48,420 --> 00:00:51,080
This context inside of a component.

14
00:00:51,140 --> 00:00:56,710
So the second way that we can consume information out of a pipe is by creating a consumer component.

15
00:00:56,930 --> 00:01:01,750
This consumer component is somewhat similar to the provider component that we just took a look at.

16
00:01:01,850 --> 00:01:06,310
The consumer is created for us automatically when we create a new context object.

17
00:01:06,320 --> 00:01:12,050
So if you recall just a little bit ago we consol logged out the Create contex call right here and we

18
00:01:12,050 --> 00:01:18,110
saw that the object that got returned had both a provider and a consumer property so that consumer property

19
00:01:18,170 --> 00:01:24,720
is a re-act component that we can use to get information out of our pite to figure out how to use the

20
00:01:24,720 --> 00:01:25,470
consumer.

21
00:01:25,500 --> 00:01:29,500
We're going to open up our butternut J.S. file inside a button.

22
00:01:29,610 --> 00:01:35,040
Yes we're going to refactor this thing to get information out of our context object by using a consumer

23
00:01:35,130 --> 00:01:38,700
instead of this this context approach.

24
00:01:38,700 --> 00:01:43,930
So inside a button yes I'm going to first clean up the context type declaration right here.

25
00:01:44,220 --> 00:01:50,190
When we are using a consumer we do not have to specify a context type context type is only required

26
00:01:50,250 --> 00:01:54,340
when we want to get our data assigned to the destock contex property.

27
00:01:54,390 --> 00:01:58,890
So I'm going to clean up the context type inside of class Button.

28
00:01:58,890 --> 00:02:06,900
Next up we're going to wrap this text right here with a new consumer component to do so.

29
00:02:06,930 --> 00:02:12,900
I'm going to clean up the cons text declaration up here and then going to turn my button component or

30
00:02:12,900 --> 00:02:17,330
the return statement into a multi-line GSX expression like so.

31
00:02:22,280 --> 00:02:24,260
And then going to remove the curly braces.

32
00:02:24,270 --> 00:02:25,240
Text right there.

33
00:02:25,350 --> 00:02:28,370
And I'm going to replace it with a new component.

34
00:02:28,380 --> 00:02:29,940
Our consumer component.

35
00:02:30,180 --> 00:02:35,700
So I'm going to reference inside of your language context at consumer

36
00:02:39,360 --> 00:02:46,260
like so whenever we place a consumer we always provide one argument to it or kind of one child I should

37
00:02:46,260 --> 00:02:50,850
say we can think of this almost as being an argument but it's really technically a child that we are

38
00:02:50,850 --> 00:02:52,490
passing into the consumer.

39
00:02:52,530 --> 00:02:55,390
This one child is always going to be a function.

40
00:02:55,500 --> 00:03:01,320
So inside of a set of curly braces I'm going to place a function like so this function is going to be

41
00:03:01,320 --> 00:03:06,690
automatically called by the consumer and it's going to be called with whatever current value is inside

42
00:03:06,720 --> 00:03:11,730
of our pipe that value is going to show up as the first argument inside of this arrow function right

43
00:03:11,730 --> 00:03:12,900
here.

44
00:03:12,900 --> 00:03:17,760
Now this is the first time that we've ever seen something like this in re-act before we are providing

45
00:03:17,820 --> 00:03:20,650
a function as a child twe Riak component.

46
00:03:20,850 --> 00:03:26,370
That component is going to take that child function and automatically invoke it for us.

47
00:03:26,400 --> 00:03:31,240
So this value right here is going to be whatever value is currently inside of the pipe.

48
00:03:31,260 --> 00:03:37,500
So inside of this function alone only inside this function can we get access to that value and use it

49
00:03:37,500 --> 00:03:39,990
to decide what we want to printout.

50
00:03:40,080 --> 00:03:44,520
In this case we're going to implement the same logic we had before where we're going to compare the

51
00:03:44,610 --> 00:03:47,550
value to the string English.

52
00:03:48,030 --> 00:03:54,720
If the value is equal to the string English then I want to return some it otherwise I'll put down my

53
00:03:54,720 --> 00:03:59,640
colon over here and we'll do vore Legan or exactly how do you spell that.

54
00:03:59,660 --> 00:04:04,390
I keep forgetting it is vore legand toujours.

55
00:04:05,370 --> 00:04:06,480
That's better.

56
00:04:07,070 --> 00:04:07,940
All right.

57
00:04:08,040 --> 00:04:10,460
So there's the entire line right there.

58
00:04:10,470 --> 00:04:15,750
So again any time we make use of a consumer to get a value out of that pipe or that context object we're

59
00:04:15,750 --> 00:04:18,210
going to pass in a single function as a child.

60
00:04:18,360 --> 00:04:23,340
That child will be called with whatever value is inside of our pipe so we can implement some logic inside

61
00:04:23,340 --> 00:04:24,210
of here.

62
00:04:24,210 --> 00:04:27,750
Now one thing I want to mention is that if you have some logic you want to place inside of your that

63
00:04:27,750 --> 00:04:29,280
ends up being kind of complex.

64
00:04:29,340 --> 00:04:34,170
You could always define a helper method on your class so I could do something like.

65
00:04:34,350 --> 00:04:38,540
I don't know how about render submit.

66
00:04:38,750 --> 00:04:45,140
And then we could call this with our value and then we can return the result of value equals English

67
00:04:46,310 --> 00:04:53,940
Samit or vore leggin like so and then we could call that from this inner function.

68
00:04:53,990 --> 00:05:00,970
So I could call this render submit and pass in the value like so all right let's try saving this and

69
00:05:00,970 --> 00:05:02,200
see what happens.

70
00:05:02,230 --> 00:05:05,280
So I'll save the file I'm going to flip back over to my application.

71
00:05:05,380 --> 00:05:10,300
I still see the default of name and submit and then if I click on the other flag I'll see the translation

72
00:05:10,390 --> 00:05:11,560
as well.

73
00:05:11,560 --> 00:05:16,300
So again this is another way of getting information out of one of these context objects.

74
00:05:16,300 --> 00:05:18,550
Very similar to this context.

75
00:05:18,550 --> 00:05:23,770
Remember when we use the context approach we also have to set up that context type but we do not have

76
00:05:23,770 --> 00:05:27,330
to do that if we are making use of the consumer approach.

77
00:05:27,340 --> 00:05:31,560
Now the most obvious question that you probably have right now is why would we do this.

78
00:05:31,600 --> 00:05:36,050
Why would we take this approach as opposed to using that context type approach.

79
00:05:36,220 --> 00:05:37,740
Well let's take a quick pause right here.

80
00:05:37,750 --> 00:05:42,040
When we come back the next section I'll tell you why we would want to use a consumer in place of that

81
00:05:42,040 --> 00:05:43,480
context type approach.

82
00:05:43,570 --> 00:05:45,990
So quick break and I'll see you in just a minute.