In this video we're gonna make a new component called blog post provider.
This thing is going to share some information with all the different components inside of our application.
So to create that I'm gonna flip back over to my editor and inside my SRT directory I'm gonna make a
new folder called context.
So we're gonna place this new component there are gonna create inside this context directory.
You might be curious why we're placing it inside this folder as opposed to a components directory or
something like that.
Well it's really simple.
Usually when we make a context that's going to handle data or generally just going to have like one
copy of that thing floating around and so we usually want to isolate or hold all these different data
related components inside the context directory.
So inside that directory I'm gonna make a new file called blog context dot J.S. then inside of here
I'm going to import react from react the reactor library has a function called create contexts.
That's what we're going to use to create this first context object.
So I'm going to create a new variable called blog context and it's going to come from react dot create
context like so so you can think of this object right here as like a pipe of sorts.
This is going to be an object that's going to be responsible for essentially that line right there.
It's what's going to essentially shepherd or move information from this blog post provider thing down
to this blog list down here after creating my blog context and then going to create a new component
inside of here called blog provider.
OK.
So this is the component that's going to be that thing right there.
Then inside of here I'm going to return blog context.
Dot provider and I'm going to write out in opening and closing tag and inside there I'm going to first
receive a prop or from our props object right here called children and then inside of the opening closing
tag I'm going to place children like so OK.
So we just did two things here they're probably a little bit mysterious.
First off what's children.
And secondly what is blog context dot provider.
Let's first discuss what this children thing is.
All right.
So that children thing is 100 percent unrelated to context.
This is a different feature in react.
We're just taking advantage of it here because it makes a lot of sense to use with this context system.
So quick example of what children is.
I want you to imagine that we've got some component called app and maybe inside of app we create something
called Custom component.
So we've got an opening tag and a closing tag and then inside those opening and closing tags we might
pass in some element called text whenever we use this kind of syntax right here.
The app component is going to essentially render our custom component.
Right.
No surprise there.
But here's the really surprising thing that text element because it is wrapped inside of custom component
is going to be passed as a prop from app down into custom component as a prop called children so we
can use this technique right here to allow ourselves to make custom components just like this and accept
some other component more or less as an argument.
And again it's going to show up inside of custom component as a prop called Children So with that in
mind taking a look at this code right here.
Essentially all we've done is created a component that can accept another component more or less as
an argument in that other argument is going to be shown inside of our blog provider
OK.
So now that we've created this component I'm going to export it from this file and then we're going
to make use of it inside of our app dot J.S. file so to export this thing I'm gonna put the export keyword
right here.
Now notice that I'm not using export default I'm just using the export keyword.
The reason for that is that we're going to eventually export that object right there at the blog context
and we're going to export that thing as our default from this file.
All right.
So I just say this.
I'll then flip back over to my apt j ust file and I'm going to import that blog provider that we just
created.
So at the very top I'll say import and I'll place a set of curly braces we're using curly braces here
because we exported blog provider as something called a named export.
So in other words we did not use the export default syntax.
So in order to import it we have to use those curly braces.
So I will import blog provider
from source context blog context then I'm going to come down to that component we created just a second
ago and here's why we added in that children thing I want to make sure that when we display blog provider
it's going to display our app component inside of it.
So I can put down blog provider that's our component.
We just created and I'm going to show the app inside of it like so make sure if you add it on the semicolon
after app make sure you clean that thing up so now we are passing app in as the child to blog provider
so we can almost imagine back inside of our blog provider right here.
We can almost imagine that children is actually app like so so by using this children thing we're essentially
doing exactly what we're showing in this diagram over here.
Our blog provider our blog post provider is wrapping or showing the react stack navigator inside of
it which therefore includes all the other screens and components that we're displaying inside of our
application Gates let's save our app dot j ust file as well and make sure I save everything inside of
here.
I should then be able to flip back over my app.
And right now nothing is different over here.
Everything is still exactly the same.
But most importantly I don't have any errors.
So at this point it probably feels like we didn't really do a whole lot but we did wire up this context
thing.
So let's take a quick pause right here and discuss exactly what we achieved by having this in in the
next video.