Now that we're navigating a user over to our show screen and also passing in the information about the
blog post we want to show we can flip back over to the show screen.
Here it is right here and we'll try to first just received that I.D..
Remember that I.D. that we passed in is not provided directly as a prop unfortunately.
Instead we have to receive that navigation prop once again and then the navigation prop has a function
called Get param.
We can then pass in a string that will be the I.D. or some of the property name that we want to retrieve
during that navigate call back over here.
So no we put an I.D. So we're going to call get ram with a string of I.D. to get that piece of information
just to make sure that this information is showing up successfully.
Let's do a quick console log.
Now I'll say this once again we'll create a new blog post tap on the post was created.
We navigate over here which should have triggered that console log.
So if we go back to our terminal I can see the idea of 10 3 2 8 right there.
Remember these ideas are randomly generated so chances are you see a different one.
OK.
So we now know exactly what blog post we're trying to show.
So I got to delete that line.
Now we need to think about how we're going to actually get our list of blog posts.
Well in order to get our list of blog posts we just have to make use of our context once again.
So anytime that you want to get some information from our blog context or any other inside of a given
component we're always going to go through the same series of steps we've already gone through this
once before inside of index screen.
First we're going to add an import statement at the top for use context.
That's our hook then inside of our component body.
We'll say const well D structure out the state value and we'll call use context and then we'll pass
in the context we want to get our information from.
In our case our context is exported from the blog context J.S. file remember this thing exports to different
values.
Context with a capital C and the provider.
So we're going to import that context and pass it into the context argument at the top we will import
capital Z context from up one directory context log context and it will pass that context in as a quick
reminder if we ever have to do multiple imports of different contexts and they are all named capital
C contexts remember we can use that little shortcut and rename it to something like blog context instead.
But we don't need to do that in this case the thing I want you to remember is that we are only able
to D structure off that state argument right there because remember inside of create data context that's
our helper function we set the value property right here and a value property is going to be whatever
our state object is plus all the different bound actions that we loaded in.
That's why we are able to D structure off the state property so back inside of show screen our state
property should be the big list of all the different blog posts that we currently have it's now between
this big list of blog posts and the I.D. we can very easily do a search through all those different
blog posts and find the appropriate one so right after we get that state value right there we'll use
another built in helper function that's present on arrays.
I'll say const blog post is state DOT find find does a another built in helper function we can pass
in a function to it this function will be called with every blog post inside that array and an inside
of here.
The first time we return true inside this function we are going to take whatever blog post we find in
assign it to that argument or submit that variable sorry I was looking at that argument right there.
So inside this aero function we can't compare blog post and say is the blog post dot I.D. equal to navigation
dot get param I.D. So if the I.D. that was provided into this screen is equal to the blog post I.D.
That's great.
We found the appropriate blog post.
Let's assign it to that variable.
And now we can show it on the screen so inside my text element rather than showing show screen I will
replace it with blog post dot title and that should be it.
So I'll save this and we'll do a quick test once again I'll tap on ADD blog post I'll tap on one of
these and I see a blog post.
Number one I can go to blog post 5 and I see blog post number 5.
Awesome.
So looks like this is working exactly as we expect.
I'll do a quick test on Android as well.
Just make sure that's working and yep looks like that's working as well.
So it looks like we've got this show screen all put together which means we can now start to focus on
our last two screens which are create and edit.
So let's start to take care of those in the next video.