1
00:00:01,220 --> 00:00:05,960
Now that we're navigating a user over to our show screen and also passing in the information about the

2
00:00:05,960 --> 00:00:09,200
blog post we want to show we can flip back over to the show screen.

3
00:00:09,200 --> 00:00:13,640
Here it is right here and we'll try to first just received that I.D..

4
00:00:13,640 --> 00:00:18,430
Remember that I.D. that we passed in is not provided directly as a prop unfortunately.

5
00:00:18,830 --> 00:00:26,010
Instead we have to receive that navigation prop once again and then the navigation prop has a function

6
00:00:26,010 --> 00:00:27,780
called Get param.

7
00:00:28,020 --> 00:00:33,720
We can then pass in a string that will be the I.D. or some of the property name that we want to retrieve

8
00:00:34,620 --> 00:00:37,440
during that navigate call back over here.

9
00:00:37,440 --> 00:00:42,810
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

10
00:00:43,880 --> 00:00:46,540
just to make sure that this information is showing up successfully.

11
00:00:46,550 --> 00:00:49,430
Let's do a quick console log.

12
00:00:49,540 --> 00:00:54,190
Now I'll say this once again we'll create a new blog post tap on the post was created.

13
00:00:54,190 --> 00:00:57,600
We navigate over here which should have triggered that console log.

14
00:00:57,640 --> 00:01:02,780
So if we go back to our terminal I can see the idea of 10 3 2 8 right there.

15
00:01:02,800 --> 00:01:06,100
Remember these ideas are randomly generated so chances are you see a different one.

16
00:01:07,520 --> 00:01:07,760
OK.

17
00:01:07,790 --> 00:01:11,160
So we now know exactly what blog post we're trying to show.

18
00:01:11,150 --> 00:01:12,770
So I got to delete that line.

19
00:01:12,840 --> 00:01:16,960
Now we need to think about how we're going to actually get our list of blog posts.

20
00:01:16,970 --> 00:01:22,350
Well in order to get our list of blog posts we just have to make use of our context once again.

21
00:01:22,370 --> 00:01:27,620
So anytime that you want to get some information from our blog context or any other inside of a given

22
00:01:27,620 --> 00:01:31,610
component we're always going to go through the same series of steps we've already gone through this

23
00:01:31,610 --> 00:01:34,280
once before inside of index screen.

24
00:01:34,280 --> 00:01:38,840
First we're going to add an import statement at the top for use context.

25
00:01:38,840 --> 00:01:43,470
That's our hook then inside of our component body.

26
00:01:43,600 --> 00:01:51,510
We'll say const well D structure out the state value and we'll call use context and then we'll pass

27
00:01:51,510 --> 00:01:55,050
in the context we want to get our information from.

28
00:01:55,050 --> 00:02:01,410
In our case our context is exported from the blog context J.S. file remember this thing exports to different

29
00:02:01,410 --> 00:02:02,060
values.

30
00:02:02,190 --> 00:02:05,640
Context with a capital C and the provider.

31
00:02:05,650 --> 00:02:11,810
So we're going to import that context and pass it into the context argument at the top we will import

32
00:02:12,590 --> 00:02:22,880
capital Z context from up one directory context log context and it will pass that context in as a quick

33
00:02:22,880 --> 00:02:28,040
reminder if we ever have to do multiple imports of different contexts and they are all named capital

34
00:02:28,040 --> 00:02:33,640
C contexts remember we can use that little shortcut and rename it to something like blog context instead.

35
00:02:33,810 --> 00:02:40,160
But we don't need to do that in this case the thing I want you to remember is that we are only able

36
00:02:40,160 --> 00:02:45,890
to D structure off that state argument right there because remember inside of create data context that's

37
00:02:45,890 --> 00:02:51,660
our helper function we set the value property right here and a value property is going to be whatever

38
00:02:51,660 --> 00:02:56,380
our state object is plus all the different bound actions that we loaded in.

39
00:02:56,510 --> 00:03:02,490
That's why we are able to D structure off the state property so back inside of show screen our state

40
00:03:02,490 --> 00:03:09,810
property should be the big list of all the different blog posts that we currently have it's now between

41
00:03:09,870 --> 00:03:15,330
this big list of blog posts and the I.D. we can very easily do a search through all those different

42
00:03:15,330 --> 00:03:21,370
blog posts and find the appropriate one so right after we get that state value right there we'll use

43
00:03:21,400 --> 00:03:24,750
another built in helper function that's present on arrays.

44
00:03:24,850 --> 00:03:32,590
I'll say const blog post is state DOT find find does a another built in helper function we can pass

45
00:03:32,590 --> 00:03:38,160
in a function to it this function will be called with every blog post inside that array and an inside

46
00:03:38,160 --> 00:03:38,490
of here.

47
00:03:38,490 --> 00:03:44,550
The first time we return true inside this function we are going to take whatever blog post we find in

48
00:03:44,580 --> 00:03:49,670
assign it to that argument or submit that variable sorry I was looking at that argument right there.

49
00:03:50,390 --> 00:03:59,360
So inside this aero function we can't compare blog post and say is the blog post dot I.D. equal to navigation

50
00:04:00,440 --> 00:04:09,700
dot get param I.D. So if the I.D. that was provided into this screen is equal to the blog post I.D.

51
00:04:09,910 --> 00:04:10,390
That's great.

52
00:04:10,390 --> 00:04:11,970
We found the appropriate blog post.

53
00:04:12,070 --> 00:04:13,450
Let's assign it to that variable.

54
00:04:13,450 --> 00:04:19,310
And now we can show it on the screen so inside my text element rather than showing show screen I will

55
00:04:19,310 --> 00:04:24,650
replace it with blog post dot title and that should be it.

56
00:04:24,750 --> 00:04:30,630
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

57
00:04:30,630 --> 00:04:32,370
these and I see a blog post.

58
00:04:32,370 --> 00:04:36,160
Number one I can go to blog post 5 and I see blog post number 5.

59
00:04:36,900 --> 00:04:37,870
Awesome.

60
00:04:37,920 --> 00:04:41,060
So looks like this is working exactly as we expect.

61
00:04:41,060 --> 00:04:42,910
I'll do a quick test on Android as well.

62
00:04:43,700 --> 00:04:48,930
Just make sure that's working and yep looks like that's working as well.

63
00:04:50,220 --> 00:04:54,720
So it looks like we've got this show screen all put together which means we can now start to focus on

64
00:04:54,720 --> 00:04:58,020
our last two screens which are create and edit.

65
00:04:58,080 --> 00:05:00,030
So let's start to take care of those in the next video.