In the last video we created this new blog provider component so you might be kind of curious what's
this context object and what is this blog context stop provider thing.
So it turns out that when we create a context object as we did right here we also get inside that object
something called the provider.
This provider thing is what's going to accept some information.
So essentially it's going to be kind of a source of information back over here and whatever information
we provide it.
It's going to make available to all of our child components.
So this is the actual mechanism that's going to move some information from the blog post provider down
to a child like blog list.
Let me show you how it works.
So if I want to share some information from this very top level component down to some nested child
I'm going to come back to my blog context provider right here and I'm going to give it a prop called
value right now for value.
I'm going to put in a value of simply five.
So this means that I want to share the number five from this parent component up here with some deeply
nested child down here.
So now any of our child components can add in a little bit of code that's going to essentially reach
back up to that provider and extract that value prop now for right now having a piece of information
of simply five is not very useful but we're just going to try to get access to that value right there
inside of a nested component and we'll figure out how we can put in more complex values after that.
Okay.
So let's now figure out how we can get access to that value right there inside of some deeply nested
child to get started inside of my blog context J J.S. file I'm going to export the blog context object
that we created right here.
So I'll say export default in this case blog context and then going to decide on what component side
of my application I want to have get access to that piece of information that value of 5.
In this case we really only have one appropriate component that's our index screen.
So let's open up our index screen and we're going to try to make sure that it can get access to that
piece of information right there.
So here's my next screen inside of here.
We're going to import that blog context object that we just exported from the blog context file so at
the top I'm going to import blog context from up one directory context blog context then to actually
make use of that context we're going to import another hook function from the react library.
Remember hooks are functions that add in some additional functionality to a function component.
So on my import statement I'm going to add in an import from react inside of a set of curly braces and
we're going to get a function called use context.
So this essentially is a function that's going to say OK look at some context object and give us access
to that things value prop right there so to make use of blog context and use context together we're
going to add in a new variable declaration inside of next screen.
We'll say const value is used context and we're gonna pass in our entire context object.
That's blog context like so it's now the number or the Variable value right here is going to be exactly
equal to whatever value prop we assigned to our blog context provider back over here.
Now at this point I just want take a very quick pause and I want to remind you that one of the downsides
to context that I mentioned is that there is a lot of special terms here.
And I think you can agree with me.
We've got this term context and we've got this term provider flying around all over the place all these
words provider and context are really hiding the true meaning of what's going on the actual relationship
or the movement of data here.
Trust me is really really simple.
Here's what it comes down to.
We create a context object.
We show the context object thing dot provider and then we give it a value prop that has whatever information
that we want to share.
That's it on the top level.
That's all we have to do up here at the very top end then anytime they want to get access to that information.
So like over here inside this component we're going to import used context and the context object that
we had created.
We're gonna call use context putting that context object and that's going to give us out the value.
So again ignore all these fancy pieces of terminology it comes down to a very simple relationship.
Throw in a value prop get value prop that's it that's all that's going on to actually prove that to
you.
I'm gonna add in a new text element inside of index screen and inside of here I'm going to print out
whatever value is like so I'll save this I'll flip back over and now I can see the number five appear
right there.
So it's very clear that whatever value we put in on this provider over here whatever we put in right
there we can retrieve inside of some other component by just calling use context and passing in blog
context.
Now if you want to back inside of our blog context J.S. file we can update that value and make it like
15 instead.
If I then save that I'll see 15 up here.
If I change the value to something like Hi there I'll see hi there appear and I bet you can guess what
else we could do here.
Like maybe we could put in a array of 1 2 3 and we'll see that up here and so on.
Now if you try to put an object inside of here you're going to see an error right now.
The reason for that is that we cannot render a text object with react and we actually saw that way earlier
inside the course it ends up with a error message.
So suffice it to say for right now we can get some information from this parent component down to a
arbitrary child by just using this value thing and use context.
That's it.
All right.
So now that we understand these basics let's come back the next video we're going to start to add in
a little bit more functionality here.
It makes sure that we can eventually maybe change this data that we're passing down because just having
a static list of numbers is not super useful.
So quick pause we'll figure that out in the next video.