1
00:00:00,540 --> 00:00:05,340
The last thing that we have to do inside of our post-show component is take the post that we were seeing

2
00:00:05,340 --> 00:00:09,220
as a prop and show it inside the render function.

3
00:00:09,240 --> 00:00:14,520
So rather than showing the hard coded text post show I I'd like to show the post title categories all

4
00:00:14,520 --> 00:00:16,210
that kind of good stuff.

5
00:00:16,290 --> 00:00:18,380
So not a lot of complexity here.

6
00:00:18,390 --> 00:00:22,500
I think that we can just use a little bit of markup to show some details about that particular post

7
00:00:23,520 --> 00:00:25,910
because we're going to refer back to the post a couple of times.

8
00:00:25,950 --> 00:00:34,470
Let's do a little bit of destructuring so we'll say Konst post is coming from this doc prop's than inside

9
00:00:34,470 --> 00:00:37,450
of your let's place an age three.

10
00:00:38,190 --> 00:00:42,870
We'll show the postop title and let's do an H six

11
00:00:46,020 --> 00:00:50,880
for the categories and maybe we'll put a little label on there as well.

12
00:00:50,930 --> 00:01:02,800
Post on categories and then we'll put a paragraph tag on for post dot content like so OK I think that

13
00:01:02,820 --> 00:01:04,890
we're about ready to test this thing out.

14
00:01:04,920 --> 00:01:10,940
So when we render this component inside the browser we should reach out to fetch the given post.

15
00:01:11,250 --> 00:01:12,750
Once we get the post back.

16
00:01:12,750 --> 00:01:15,690
We'll select it from the post object.

17
00:01:15,750 --> 00:01:20,340
That's our application states and then we will render some details about it onto the screen.

18
00:01:20,340 --> 00:01:21,830
So let's give us a shot.

19
00:01:21,960 --> 00:01:26,880
Now the first thing we do need to do is make sure that we render a post that we have an ID for.

20
00:01:26,880 --> 00:01:34,080
So inside of my network browser over here I need to refresh the page while I'm specifically looking

21
00:01:34,080 --> 00:01:35,630
at my list of posts.

22
00:01:35,760 --> 00:01:39,200
If I look at a individual request.

23
00:01:39,210 --> 00:01:41,130
So here's the list of posts right here.

24
00:01:41,130 --> 00:01:44,760
I can find the ID for one of my existing posts on this list.

25
00:01:44,970 --> 00:01:53,490
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

26
00:01:53,490 --> 00:01:54,450
7.

27
00:01:54,450 --> 00:01:57,990
So do make sure that you're using a very real post ID right here.

28
00:01:57,990 --> 00:02:02,140
If you are not using a real post ID you will not see anything appear on the screen.

29
00:02:03,030 --> 00:02:03,270
OK.

30
00:02:03,290 --> 00:02:09,520
So let's go give this a shot or go over here and it looks like nothing happens.

31
00:02:09,520 --> 00:02:10,280
How interesting.

32
00:02:10,280 --> 00:02:14,810
So let's look at the cons. And you'll see an error message.

33
00:02:14,810 --> 00:02:17,930
You should see something that says something like cannot read property.

34
00:02:17,930 --> 00:02:20,480
Title of undefined.

35
00:02:20,790 --> 00:02:22,250
Well that's definitely interesting.

36
00:02:22,400 --> 00:02:25,010
Let's think about what's going on here.

37
00:02:25,920 --> 00:02:26,390
OK.

38
00:02:26,450 --> 00:02:28,770
So I'm looking at my post show component.

39
00:02:28,790 --> 00:02:34,520
I want you to think very carefully about the order of operations inside of our application.

40
00:02:35,060 --> 00:02:43,220
When this component is first rendered to the screen it then calls the component did mt life cycle method

41
00:02:43,300 --> 00:02:48,080
so a component gets run into the screen component and mount gets called and we reach out to fetch our

42
00:02:48,080 --> 00:02:49,110
post.

43
00:02:49,460 --> 00:02:55,790
Then once we fetch the post something something something redux it goes through connect blah blah blah

44
00:02:56,560 --> 00:03:00,260
componentry renders and we show details about the post on the screen.

45
00:03:00,440 --> 00:03:01,860
So what's the missing piece here.

46
00:03:01,880 --> 00:03:03,460
What are we really missing.

47
00:03:03,890 --> 00:03:10,910
Well the key is the first part of that whole flow art component is getting rendered to the screen one

48
00:03:10,910 --> 00:03:16,320
time before we even attempt to fetch our post.

49
00:03:17,030 --> 00:03:22,580
During that time before we even attempted to fetch our post we don't have any post with the correct

50
00:03:22,640 --> 00:03:24,370
ID sitting in memory.

51
00:03:24,500 --> 00:03:29,840
So when we tried to reach into our big object containing all these posts this statement down here will

52
00:03:29,840 --> 00:03:31,600
return undefined.

53
00:03:32,000 --> 00:03:37,880
And so post of undefined will be passed into our application or into our component.

54
00:03:38,000 --> 00:03:44,360
And so we are literally trying to look at the property title of undefined essentially post right here

55
00:03:44,360 --> 00:03:48,650
is coming in as undefined to our application to resolve this.

56
00:03:48,650 --> 00:03:55,220
We can add a little bit of a check to our render method inside of here before we try to access any of

57
00:03:55,220 --> 00:03:58,200
the nested properties on the post itself.

58
00:03:58,220 --> 00:04:02,270
We can look at the post and we can say hey if we don't have one.

59
00:04:02,570 --> 00:04:10,040
How about instead of trying to return this big block of GSX down here let's just return a div that contains

60
00:04:10,040 --> 00:04:13,080
the text loading like so.

61
00:04:13,670 --> 00:04:20,390
So now if we render this component when a post has not yet been fetched correctly will show the loading

62
00:04:20,420 --> 00:04:26,480
div and then once the post is fetched and this component renders we will then have a post available

63
00:04:26,630 --> 00:04:29,570
and we'll hit this block of GSX instead.

64
00:04:29,570 --> 00:04:31,190
So let's test this out.

65
00:04:31,320 --> 00:04:33,770
Flip back over or refresh the document.

66
00:04:34,160 --> 00:04:36,470
And now we see the post appear on the screen.

67
00:04:36,470 --> 00:04:37,630
Perfect.

68
00:04:37,690 --> 00:04:37,990
OK.

69
00:04:38,000 --> 00:04:39,660
So this is looking pretty good.

70
00:04:40,160 --> 00:04:45,830
I want to let you know that data issues like this where you would try to access properties an element

71
00:04:45,950 --> 00:04:51,820
or a record that does not yet exist is something that you are going to run up against inside of reacted

72
00:04:51,830 --> 00:04:55,320
redox just all the time on your personal projects.

73
00:04:55,340 --> 00:04:58,890
I guarantee you you are going to run into this issue right here.

74
00:04:59,180 --> 00:05:04,490
So whenever you start to see messages appear on your screen like cannot read property title is undefined

75
00:05:05,210 --> 00:05:09,260
do double check to make sure that the record you're trying to access actually exists.

76
00:05:09,290 --> 00:05:14,360
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

77
00:05:14,450 --> 00:05:17,200
just do something else.

78
00:05:17,360 --> 00:05:17,670
OK.

79
00:05:17,690 --> 00:05:18,820
So this is looking pretty good.

80
00:05:18,830 --> 00:05:23,540
I think that the last big thing that we need to take care of on this component is make sure that has

81
00:05:23,540 --> 00:05:25,310
a big back button somewhere.

82
00:05:25,320 --> 00:05:28,260
We also need to make sure that we can delete this post as well.

83
00:05:28,610 --> 00:05:31,630
So let's take care of both those issues in the next section.