In the last video we saw that making a new provider creates a separate pipe of information.
So we put down two providers and each user creates got a different value over the Context object.
If we then placed a user create without any provider wrapping it it only got the default value.
So now that we have a better idea of how the provider behaves we're gonna start to look at one last
feature around context.
I'm going to first begin by cleaning up the extra provider in user create that we had placed inside
of our apt on file file OK.
So I'm left with just the value coming from this state Delta language right here.
The last thing we're going to take a look at around context is the second way of getting information
out of this pipe of sorts.
We've already taken a look at the first way of getting information out.
We saw that we could set up that contex type property and then we got access to our data on that property.
This context inside of a component.
So the second way that we can consume information out of a pipe is by creating a consumer component.
This consumer component is somewhat similar to the provider component that we just took a look at.
The consumer is created for us automatically when we create a new context object.
So if you recall just a little bit ago we consol logged out the Create contex call right here and we
saw that the object that got returned had both a provider and a consumer property so that consumer property
is a re-act component that we can use to get information out of our pite to figure out how to use the
consumer.
We're going to open up our butternut J.S. file inside a button.
Yes we're going to refactor this thing to get information out of our context object by using a consumer
instead of this this context approach.
So inside a button yes I'm going to first clean up the context type declaration right here.
When we are using a consumer we do not have to specify a context type context type is only required
when we want to get our data assigned to the destock contex property.
So I'm going to clean up the context type inside of class Button.
Next up we're going to wrap this text right here with a new consumer component to do so.
I'm going to clean up the cons text declaration up here and then going to turn my button component or
the return statement into a multi-line GSX expression like so.
And then going to remove the curly braces.
Text right there.
And I'm going to replace it with a new component.
Our consumer component.
So I'm going to reference inside of your language context at consumer
like so whenever we place a consumer we always provide one argument to it or kind of one child I should
say we can think of this almost as being an argument but it's really technically a child that we are
passing into the consumer.
This one child is always going to be a function.
So inside of a set of curly braces I'm going to place a function like so this function is going to be
automatically called by the consumer and it's going to be called with whatever current value is inside
of our pipe that value is going to show up as the first argument inside of this arrow function right
here.
Now this is the first time that we've ever seen something like this in re-act before we are providing
a function as a child twe Riak component.
That component is going to take that child function and automatically invoke it for us.
So this value right here is going to be whatever value is currently inside of the pipe.
So inside of this function alone only inside this function can we get access to that value and use it
to decide what we want to printout.
In this case we're going to implement the same logic we had before where we're going to compare the
value to the string English.
If the value is equal to the string English then I want to return some it otherwise I'll put down my
colon over here and we'll do vore Legan or exactly how do you spell that.
I keep forgetting it is vore legand toujours.
That's better.
All right.
So there's the entire line right there.
So again any time we make use of a consumer to get a value out of that pipe or that context object we're
going to pass in a single function as a child.
That child will be called with whatever value is inside of our pipe so we can implement some logic inside
of here.
Now one thing I want to mention is that if you have some logic you want to place inside of your that
ends up being kind of complex.
You could always define a helper method on your class so I could do something like.
I don't know how about render submit.
And then we could call this with our value and then we can return the result of value equals English
Samit or vore leggin like so and then we could call that from this inner function.
So I could call this render submit and pass in the value like so all right let's try saving this and
see what happens.
So I'll save the file I'm going to flip back over to my application.
I still see the default of name and submit and then if I click on the other flag I'll see the translation
as well.
So again this is another way of getting information out of one of these context objects.
Very similar to this context.
Remember when we use the context approach we also have to set up that context type but we do not have
to do that if we are making use of the consumer approach.
Now the most obvious question that you probably have right now is why would we do this.
Why would we take this approach as opposed to using that context type approach.
Well let's take a quick pause right here.
When we come back the next section I'll tell you why we would want to use a consumer in place of that
context type approach.
So quick break and I'll see you in just a minute.