In last video we spoke about how there are two ways to get information into a context object in two
ways to get information out.
We're not going to start to focus on creating a context object inside of application that's going to
communicate the currently selected language from our app component down to both the button and the field
components.
So to get started I'm going to flip back over to my code editor inside of my SIRC directory.
I'm going to make a new folder called contex like so.
Notice that this is a directory that is a sibling to components inside the context directory and then
going to create a new file called language context.
J.S. the purpose of this file is to create a context object and export it.
The reason we are putting this into a separate file is that we can import the Context object into only
the component files that we care about in our application.
We only want to connect this contact object to our app component and the button and the field.
No other component needs to get access to the language context.
So that is why we are creating it inside of a separate file so that we can only make use of it where
we actually want to connect it then to create my Context object.
I'm going to import re-act from react at the top of the file and then I will simply say export default
re-act does create context like so.
And that is pretty much it.
That is all we have to do to create a context object.
Like I said the challenge in understanding context is not in creating it.
It is understanding how we get information into it and out of it.
That's the real challenge.
So now that we have created our context object we are going to get some information into the object
by setting up a default value.
We can create a default value by passing it directly into the create context call.
So if you create context right here I'm going to pass a string of English like so.
So that's going to indicate to my two components are my two nested children of the field and a button
that by default the selected language that we should be showing on the screen is English.
So the default value for the Context object is this string English now that we have put a default value
into the Context object we're going to connect it to our button component.
First we're going to do the same process for the field but we'll start with the button we're going to
connect that context object to our nested child of button by making use of this this context property.
So we're going to making use of this context to get information out of the Context object rather than
creating this consumer component thing.
Over here we'll talk about why we will use a consumer component later on.
OK.
So inside of my components directory I will find my button dodgiest file and then at the top I'm going
to import the language context object that we just created.
So I'm going to import language context from up one directory contex.
Make sure you get the on there if you spelt the directory name over here with an S as well.
And then I'm going to import the language context file like so.
Now to hook up the language context object to my button component.
Let's look at a quick diagram.
All right so here's what we're going to do.
We're going to first set up something called a context type that is going to essentially link our button
component to the Context object.
And then to actually reference the information that is inside of the Context object.
We're going to make use of the this context property.
So again the first thing we do is set up this context type property back inside of my component file.
I'm going to add a little bit of space inside of my component class and then I'll add in static context
type equals language context like so so this is how we Hookup a context object to a class component.
We say static context type and then we just print out the Context object itself that we had created
inside that other file.
Now remember the context type property here much like many other properties we have created inside of
Riak components is a very special property name.
So if you call this anything else this context stuff is not going to work correctly if you called it
something like my context right.
Nope not going to work.
Ask to be called exactly contex type like so.
Now you may have not ever seen the static keyword syntax before.
Essentially what static context typewrite here does is it adds a property to our class itself.
Remember any time that we create a instance of a component by writing out something like button inside
of GSX that is creating an instance of the Button class and each time we add methods to a class or any
time that we update say or state property or anything like that we are changing properties that are
assigned to an instance of our class when we make use of the static.
You were right here.
We are adding a property directly to the class itself.
So the line of code that you see right there is identical to writing out button Dom context type equals
language context.
You can set up a context type property by making use of either methods that you see right here so we
can write out either static contex type inside of the class declaration or after creating the class.
We can then write out the class name Dom context type and then hook up the context like so you can do
it either way.
Totally up to you.
Personally I make like making use of the static context type because it puts that declaration at the
very top of the file.
Very easy to read.
Very easy to find.
So now that we have added a reference of context type to our context object to our component class our
component class can now reference this context and get access to the data inside of that context object
which in this case is this string English.
So to make sure that's the case I'm going to find my render method.
And inside there are going to cons. log out this duck context like so.
All right so now it's time to test this out.
I'm going to save the button dachas file.
I'm going to save the language context.
Yes file and then I'll flip back over to my browser.
I'm going to make sure I refresh the page and then when I do so I should see a console log over here
of this string English.
All right so that's pretty much it.
That is a very basic example.
We have now created a context object.
We got a default value into it by passing the default value into the context object when we created
it.
And then we got that default value out of that context object by setting up the context type property
to link our component to the context object.
And we got reference to the actual data inside the context object with this context.
Now one thing I want to kind of clear here is that I'm giving you like a super detailed academic definition
of what's going on.
So if it feels like this is kind of confusing I want to tell you it's really not you know at the end
the day.
Let's just like really simplify this create the context object define context type boom.
You get this context.
That's it that's all that's really going on.
All right.
Now let's going to show you very quickly is that we can very easily change the string that we make use
of when we create our context to change the default value inside that context object.
So for example rather than passing in a string of English I could say simply Dutch.
So if I change that and then save the file we can flip back over NLC a console log if Dutch We do not
have to pass in strings to a context object.
For values that get shared we can use any type of valid javascript value so we can do an object with
a color of red.
So I can save that and I'll see color of red.
We can do an array that has one 2 three.
So I can save that and see one 2 three over here.
So I think you get the idea pretty quickly.
We can share any information that we want inside of our context object.
But for our application it makes sense to have a default value of English.
OK so now that we've got a very simple example put together.
Let's take a quick pause.
When we come back in the next section we're going to make sure that our button component updates itself
based upon that context property.
And then after that we'll make sure that we repeat the same process for our field component as well.
So quick pulse and I'll see you in just a minute.