The last thing that we have to do inside of our post-show component is take the post that we were seeing
as a prop and show it inside the render function.
So rather than showing the hard coded text post show I I'd like to show the post title categories all
that kind of good stuff.
So not a lot of complexity here.
I think that we can just use a little bit of markup to show some details about that particular post
because we're going to refer back to the post a couple of times.
Let's do a little bit of destructuring so we'll say Konst post is coming from this doc prop's than inside
of your let's place an age three.
We'll show the postop title and let's do an H six
for the categories and maybe we'll put a little label on there as well.
Post on categories and then we'll put a paragraph tag on for post dot content like so OK I think that
we're about ready to test this thing out.
So when we render this component inside the browser we should reach out to fetch the given post.
Once we get the post back.
We'll select it from the post object.
That's our application states and then we will render some details about it onto the screen.
So let's give us a shot.
Now the first thing we do need to do is make sure that we render a post that we have an ID for.
So inside of my network browser over here I need to refresh the page while I'm specifically looking
at my list of posts.
If I look at a individual request.
So here's the list of posts right here.
I can find the ID for one of my existing posts on this list.
So I'm going to take the 8 1 8 8 7 right here and I should be able to navigate to post slash 8 1 8 8
7.
So do make sure that you're using a very real post ID right here.
If you are not using a real post ID you will not see anything appear on the screen.
OK.
So let's go give this a shot or go over here and it looks like nothing happens.
How interesting.
So let's look at the cons. And you'll see an error message.
You should see something that says something like cannot read property.
Title of undefined.
Well that's definitely interesting.
Let's think about what's going on here.
OK.
So I'm looking at my post show component.
I want you to think very carefully about the order of operations inside of our application.
When this component is first rendered to the screen it then calls the component did mt life cycle method
so a component gets run into the screen component and mount gets called and we reach out to fetch our
post.
Then once we fetch the post something something something redux it goes through connect blah blah blah
componentry renders and we show details about the post on the screen.
So what's the missing piece here.
What are we really missing.
Well the key is the first part of that whole flow art component is getting rendered to the screen one
time before we even attempt to fetch our post.
During that time before we even attempted to fetch our post we don't have any post with the correct
ID sitting in memory.
So when we tried to reach into our big object containing all these posts this statement down here will
return undefined.
And so post of undefined will be passed into our application or into our component.
And so we are literally trying to look at the property title of undefined essentially post right here
is coming in as undefined to our application to resolve this.
We can add a little bit of a check to our render method inside of here before we try to access any of
the nested properties on the post itself.
We can look at the post and we can say hey if we don't have one.
How about instead of trying to return this big block of GSX down here let's just return a div that contains
the text loading like so.
So now if we render this component when a post has not yet been fetched correctly will show the loading
div and then once the post is fetched and this component renders we will then have a post available
and we'll hit this block of GSX instead.
So let's test this out.
Flip back over or refresh the document.
And now we see the post appear on the screen.
Perfect.
OK.
So this is looking pretty good.
I want to let you know that data issues like this where you would try to access properties an element
or a record that does not yet exist is something that you are going to run up against inside of reacted
redox just all the time on your personal projects.
I guarantee you you are going to run into this issue right here.
So whenever you start to see messages appear on your screen like cannot read property title is undefined
do double check to make sure that the record you're trying to access actually exists.
And if it does not you can add in a simple check to say well if we don't have that data yet no problem
just do something else.
OK.
So this is looking pretty good.
I think that the last big thing that we need to take care of on this component is make sure that has
a big back button somewhere.
We also need to make sure that we can delete this post as well.
So let's take care of both those issues in the next section.