All right.
Let's continue on.
So we now need to add in a button element to our next screen.
And like we just said whenever user taps it we're gonna call that callback.
So inside my index screen dot J.S. file.
I'm going to find my import statement from React Native and I'm going to import.
Button then right above my flight list I will place that button where the button I'll give it a title
of ADD post and then for the on press callback well we'll add that in just a second.
Let's first update the data that we get back from our context variable right here.
So remember when we call use context that's gonna give us whatever information we added in to the value
prop back inside of our blog post provider.
So the information that we're now getting out of this used context call is no longer a array of blog
posts.
Instead it's going to be that object right there so we're going to use a little bit of D structuring
to get our data property and the ADD blog post callback I'll then make sure that I pass in that data
property to our flat list and replace what we are currently calling blog posts.
So data is now going to be data like so that is our list of blog posts OK.
So now on our button element now we can add on the on press callback.
So this will be a function.
Any time a user presses the button we're going to call add blog post.
Now we are in another one of those scenarios here where we are essentially adding in an arrow function
that just calls another function.
So we can optionally choose to shorten this up and rather than creating this extra function here we
can instead just pass a reference to the function that we want to be called anytime a user presses.
So I could replace that with simply add blog post without any prints and no prints on there because
we're just passing in a reference to the function to be called whenever a user presses that button okay.
So let's now save this and we'll do a quick test so I'll flip back over and actually build a tap on
that button and see blog post 1 2 3 4 5 and so on appear perfect.
I'm going to flip over to Android and I'll do the same thing.
Yep works over here as well.
Now I know I've repeated what's going on here many times again I'm going to repeat it just once again.
So what we've done here is added in a state variable to our blog post provider.
Anytime that state variable changes our entire application is going to re render and we're going to
pass down some new value from our provider down to all the different components that are connected to
that provider so back inside of our blog context right here whenever we call add blog post we're gonna
update our state variable that makes this component render and everything else we render as well.
So we're gonna get the new list of blog posts we're gonna pass in that new list of blog post to our
provider then inside of our index screen we're going to receive that new piece of data and pass in the
new array of blog posts to our flat list the flat list is then going to update and show the new list
a blog post to the user and that's it.
That's the entire system.
So what we have right here is a perfect example of how context is used.
Now one thing want to clarify here really quickly because there is a lot of misinformation inside the
community is that technically the context system is just the system of communicating information.
A lot of people say hey let's use context to manage our state.
We're not actually using context to manage states or data here we're using the context system to move
information around.
We're still managing our state using classic you state calls.
So whenever people say to you hey let's manage our state with context or something like that it's not
quite a statement that makes a lot of sense again context is just about moving information and it doesn't
necessarily entirely replace a library like say redux or something like that.
All right.
So suffice it to say we now have a great example here of moving data around in cyber application and
getting that data to update as well.
Now even though this looks good there's still a couple of improvements we can make.
So let's take a quick pause right here when we come back the next video.
I want to point out one kind of awkward thing about the code that we've written out so far so quick
pause and I'll see you in just a minute.