1
00:00:00,630 --> 00:00:05,190
Now that we have the ability to create new posts we'll start working on the last page inside of our

2
00:00:05,190 --> 00:00:06,110
application.

3
00:00:06,120 --> 00:00:12,180
The posts show component the purpose of this component is to show details about a very particular post

4
00:00:12,180 --> 00:00:18,880
on the screen and the user should also have the ability to delete a post from here as well.

5
00:00:19,140 --> 00:00:22,290
I think that overall this new route is going to be pretty straightforward.

6
00:00:22,290 --> 00:00:26,610
I think that the only tough thing about it is figuring out how we're going to fetch a very particular

7
00:00:26,610 --> 00:00:27,560
post.

8
00:00:27,570 --> 00:00:31,690
So remember we want to find for example here the post with I-85.

9
00:00:31,890 --> 00:00:34,630
So that's probably going to be the only big challenge I expect to see.

10
00:00:34,920 --> 00:00:38,970
So without further ado let's just go ahead and get to it.

11
00:00:39,120 --> 00:00:43,920
Going to change back over to my code editor and I think we'll start off by putting together some scaffolding

12
00:00:43,920 --> 00:00:45,790
for our new component.

13
00:00:45,810 --> 00:00:52,430
So in my components directory I'll make a new file called posts show us.

14
00:00:52,590 --> 00:01:02,250
And then inside of here we'll put some of our usual boilerplate XML import react and component from

15
00:01:02,250 --> 00:01:12,070
re-act will create the posts show which will extend the component base class we'll put in a little bit

16
00:01:12,160 --> 00:01:14,590
of boilerplate for the render method.

17
00:01:14,790 --> 00:01:23,320
For right now just a div that says Post show is appropriate and at the bottom we can say export default

18
00:01:23,590 --> 00:01:25,660
posts show.

19
00:01:26,500 --> 00:01:28,740
OK so this is looking like a good start.

20
00:01:29,200 --> 00:01:34,180
Now to make sure that we can navigate to this page inside of our application will flip back over to

21
00:01:34,180 --> 00:01:39,370
our top level index start J.S. filed and add this to a new route component.

22
00:01:39,400 --> 00:01:43,240
So let's go back to index start yes inside of here.

23
00:01:43,270 --> 00:01:45,450
I will import the component we just create it.

24
00:01:45,500 --> 00:01:56,210
So the posts show from components post show and then we'll add in an additional route.

25
00:01:56,230 --> 00:02:01,280
Now I do recall that the order in which we define our routes makes a big difference here.

26
00:02:01,390 --> 00:02:07,480
If we define routes in an incorrect order we might match an incorrect route and we'll get the incorrect

27
00:02:07,480 --> 00:02:09,820
component to appear on the screen.

28
00:02:09,820 --> 00:02:15,340
So in this case we want to make sure that we add this new route between the two existing ones.

29
00:02:15,350 --> 00:02:21,930
So inside of here we'll say route it will give it a path of posts slash colon ID

30
00:02:24,410 --> 00:02:27,850
posts show it's

31
00:02:31,230 --> 00:02:38,050
aerial remember that the colon ID right here is a wild card of sorts.

32
00:02:38,050 --> 00:02:44,770
So re-act routers going to try to take whatever is in that little position you are l and pass it as

33
00:02:44,770 --> 00:02:48,240
a property or a prop to our post show components.

34
00:02:48,490 --> 00:02:53,080
We wanted to make sure that this was specifically the second route inside of our application because

35
00:02:53,080 --> 00:03:00,380
if it was the first one if the user tried to navigate to posts slash knew slash knew would be in or

36
00:03:00,430 --> 00:03:02,420
would be taken as the wildcard token.

37
00:03:02,440 --> 00:03:05,690
And so this route would match post-New if it was first.

38
00:03:05,740 --> 00:03:10,120
So thats why we want to make sure that it is the second one inside of our application.

39
00:03:10,120 --> 00:03:10,370
All right.

40
00:03:10,390 --> 00:03:12,580
So let's test this out and see how we're doing.

41
00:03:12,580 --> 00:03:18,910
I'm going to save the file I'm going to refresh our application inside the browser and I'm going to

42
00:03:18,910 --> 00:03:22,720
manually navigate to posts and then we can go to essentially anything.

43
00:03:22,810 --> 00:03:25,000
Say 1 2 3 right now.

44
00:03:25,000 --> 00:03:26,350
So I go to 1 2 3.

45
00:03:26,430 --> 00:03:32,110
We correctly see posts show on the screen and if we go to slash new we still see the new form on the

46
00:03:32,110 --> 00:03:32,800
screen.

47
00:03:33,130 --> 00:03:33,450
OK.

48
00:03:33,500 --> 00:03:35,280
So this is looking like a good start.

49
00:03:35,500 --> 00:03:39,090
Let's continue with our application inside the next section.