Our application is now looking pretty good.
We have the ability to select a language whenever we select a language by clicking on the flag that
updates the component level state inside of our app component.
We now want to make sure that we can somehow communicate that selection down to our field component
and our button component as well to communicate this information.
We're going to make an use of the context system in this video.
I'm going to tell you a little bit more about how the contest system works in detail and I will write
out some code to make use of it inside of our application.
So let's get to it.
All right so first diagram right here.
As we said many times the context system is all about communicating some information from a parent component
down to a nested child.
In our case our parent component is the app and the nested child that we want to communicate some information
to is both the button and the field components in order to communicate this information.
We're going to create something called a Context object.
You can think of this context object right here.
It's this big arrow as being like a pipe of sorts a pipe that has water moving through it.
In our case we don't have water.
We instead have some data.
So we have some data that is going to move from the top of the pipe and then it's going to flow through
to the very bottom where it can then be consumed by some child component down here.
Now the challenging part about understanding how this context object right here works is understanding
how information gets into the pipe.
So like how we get information into the Context object and how we get information out of it.
If you've ever read the official documentation on the re-act J.S. home page about the Context object
things might seem a little bit confusing and in my opinion it is confusing simply because the documentation
is not clear on how we get information into the pipe and out of it.
So let's clarify how we get information into it and out of it.
In total there are two ways that we can get information into a context object.
We're into this pipe of sorts.
And then there are two ways that we can get information out or out of this pipe of sorts.
So I'm going to show you another diagram.
It's going to look a little bit crazy and it's going to show you the two ways that we can get information
in and it two ways that we can get information out.
OK.
So here's the crazy diagram at the top.
We've got the two ways that we can get information into our pipe so we can refer to these as being like
sources of data.
And then at the bottom are the two ways that we can get information out of the pipe or out of the Context
object.
So these down here are the ways we can use the information that is flowing through that context object.
So to get information into the Context object we can either set up something called a default value
when our context object is created or alternatively inside of our parent component we can create something
called a provider component and this provider component can essentially push information into the Context
object.
So that is how we get information into the Context object.
We can either set up this default value or we can create this provider object.
I'm going to show you examples of both these ways of getting information into the Context object.
Once we once you get some information out of the object we can either reference the context property
inside of a nested child component or inside the nested child we can create a component called a consumer
component.
So that's how we get information out of the Context object either reference the stock context or make
use of this consumer thing.
Again these are the two ways that we get information in in the two ways we get information out of a
Context object.
The reason is that the official documentation is not super clear on this stuff is that there are certain
scenarios in which you will want to use this context in certain scenarios in which you want to use this
consumer thing.
So going to make sure that you really understand the difference between the two.
Once we start writing some code.
So with that in mind let's take a quick pause right here.
When we come back the next section we're going to create our first Context object and then wire it up
to a nested child inside of our application.
So quick pause and I'll see you in just a minute.