As we mentioned in the last video rendering out a list of blog posts is great but eventually we probably
want to add in or maybe even edit some given blog post.
So in this video we're going to figure out how to somehow change the data inside of our blog provider.
Any time we change the data inside of here we're going to want our entire application to re render and
show that new source of data.
Now anytime you hear the word cause our application to re render in the world of react.
We are always even when we're dealing with context right here we are always talking about state.
So when I start to say hey let's have some source of information that's going to change over time and
whenever that data changes we want to re render our app.
We are always talking about creating some kind of state variable.
So here's the idea right now inside of our blog post provider we are passing down a static list a blog
post to the index screen.
Notice that inside of this diagram I abbreviated the react navigation stack Navy navigator right here
just as essentially stuff and we're providing this information using the contact system.
So in order to make sure that the index screen can somehow change that data we're going to initialize
a piece of state inside of our blog post provider and we will call that piece of state simply blog posts.
Then when we share some information from the blog post provider down to the index screen we're going
to pass a single object that has a couple of different properties inside of it.
The first property it's going to have.
Well we will call data and data is going to be simply the array of blog post that we're currently working
with then we will also pass in a second option here or second property that we will call add blog post.
So this is essentially a callback function that we're gonna pass from the blog post provider down to
our index screen.
If the index screen every calls add blog post that's going to cause our blog post provider to randomly
generate a new blog post add it to our list of blog posts.
Remember that is a state variable.
So when we add in a new blog post to that thing that's going to cause our blog post to re render.
And that's gonna make our entire application re render in our index screen is going gonna get the brand
new list of blog posts over this context channel so that's the general idea.
So let's look back over to our code editor and start putting this thing together.
All right.
Inside of my blog context file I'm going to first begin by importing from react the use state helper.
So remember that's a hook we can use it to add in a context variable to a component.
So then inside a blog provider rather than generating this static list of blog posts right there I'm
going to instead initialize a new state variable so I'll call this new state variable blog posts.
I'll get the setter of set blog posts and then we will get that value from you state the default value
of blog posts.
So in other words when our application first starts up I want to have an empty array because by default
we're not gonna have any blog posts whatsoever.
Now there's just one little thing to be aware of here.
I just said a moment ago that we're going to pass down a callback function called add blog post and
whenever we call that we want to add in a new blog post to this state variable.
But right now we've got a simple setter this setter completely updates this list right here completely
it replaces that value.
A hundred percent.
So to make sure that we actually have a function called add blog posts we can pass down we're going
to create a little helper function inside of our component.
So right after we create our state variable I'm gonna make a new function called add blog posts.
So the goal this function is to use our setter to add in a new blog post to our blog post variable.
So to do so inside of here we're going to call set blog posts and we're gonna use a little bit of complicated
syntax inside of here but you'll understand what's going on just fine.
So inside of here I'm going to add in a new array remember and time that we want to update a state variable
we're always going to call the setter.
We're going to pass in the new value to use we're never going to modify the original value so in adding
in a new array right here I'm essentially creating a brand new array from scratch and I'm not changing
the original blog post variable then inside of here I'm going to take all the existing blog posts that
we have and I'm going to add it into this new Array that I just created.
I can do that by writing out dot dot dot blog posts so this code right here just by itself means create
a new array and inside that new Array take all the current blog posts we have and add them into the
new Array.
That's it.
Then after that I'm going to add in the new blog post that we want to add so I'll put in a new object
right here.
This is going to be the brand new blog post that we're adding in.
I'm going to give it a title and we could give it a fixed title something it says like my blog post
but it would be kind of nice if we had some kind of changing blog title Inside of here instead.
So going to make the title out of a template string so I'll place my back ticks and I'll make the title
blog post number and I want to print out the number of this new blog posts are kind of its index to
do so I'll place my dollar sign curly braces and inside there I'll take a look at the current value
of blog posts.
So that's an array remember.
So going to get the current number of blog posts we have and I'll just add one.
So that should result in the title of blog post one then two then three then four and so on.
So I'll do blog posts dot length plus loops length plus one.
Like so so we've now got this callback function.
Any time we invoke it we're gonna make a brand new Array will add in all of our current blog posts add
in the new one that we just generated and we're going to use this overall array to update our state
variable as soon as we update that state variable our component right here at the blog provider is going
to re render because the blog provider is showing every other component inside our application.
Our entire application is going to be updated when that happens.
We're then going to pass down the new list of blog posts into our context.
So that means that the new list of blog posts is going to flow down into our index screen the next screen
is then going to get the updated list of blog posts and re render our flat list with those okay.
So that's pretty much it.
So last thing we have to do here is make sure that when we pass a value into this provider we have to
make sure that we provide not only that list of blog posts but also this callback function as well so
we need to essentially pass an object just like that right there.
So to do so I'm going to update the value prop. I'm going to delete blog posts and I'm gonna put in
an object like so.
So as usual remember that means we're gonna have two sets of curly braces and I'll say data is blog
posts and my ADD blog post function I'll pass under a property called add blog post and that's going
to be the add blog post function.
So add blog post and now as usual we have an identical key and value right here which means we can condense
it down to just the one statement of ADD blog posts like so that's 1 percent equivalent to what we just
had okay.
Let's save this and that should pretty much be it on our contact site.
So now we have this situation successfully setup our blog post provider is passing down an object that
has our current list a blog posts and a way to change it.
It's now the last thing we have to do is add some code into our index screen that's going to invoke
the add blog post callback so we don't have anything for that just yet.
So let's take a quick pause right here.
When we come back the next video we're going to add in a button that the user can press any time the
user presses that button.
We're going to run add a blog post and that should kick off this entire series of interactions where
we update our state to cause the component to re render get the new list of blog posts inside of index
screen and then render them out.
So as usual quick pause and I'll see you in just a minute.