1
00:00:01,130 --> 00:00:05,750
In this video we're going to set up a little goal for ourselves right now just sharing some information

2
00:00:05,750 --> 00:00:09,660
that's just like an array of numbers or a simple number is not super useful.

3
00:00:09,680 --> 00:00:14,030
So instead I want to imagine that we're going to create a list of blog posts I want to communicate.

4
00:00:14,030 --> 00:00:19,340
That list of blog posts from this blog provider down to our index screen and then inside of our index

5
00:00:19,340 --> 00:00:19,990
screen.

6
00:00:20,060 --> 00:00:25,760
I want to render that list of blog posts out inside of a flat list component as opposed to the plain

7
00:00:25,760 --> 00:00:27,390
text we have right now.

8
00:00:27,410 --> 00:00:33,110
So to get started back inside of blog context I'm going to create a new list of blog posts right here.

9
00:00:33,110 --> 00:00:39,500
So going to say concept blog posts and we're going to create an array of objects where each object represents

10
00:00:39,500 --> 00:00:40,870
one blog post.

11
00:00:41,180 --> 00:00:48,230
So I'm going to add in a object with a title of maybe blog post number one and then the next one a title

12
00:00:48,230 --> 00:00:53,420
of blog post number two.

13
00:00:53,420 --> 00:00:58,460
Now I want to communicate this information from our blog provider down to any nested component.

14
00:00:58,490 --> 00:01:04,250
Remember to do so all we have to do is take that information and add it in to this value prop on the

15
00:01:04,250 --> 00:01:05,990
blog context provider.

16
00:01:05,990 --> 00:01:12,820
So going to delete that array of numbers and I will replace it with blog posts and I'll save this file.

17
00:01:12,830 --> 00:01:15,860
Now if you save this file you'll probably see an error message.

18
00:01:15,860 --> 00:01:16,740
Back over here.

19
00:01:16,760 --> 00:01:19,450
So it says objects are not valid as a real child remember.

20
00:01:19,610 --> 00:01:24,010
That's because we are trying to show an array of objects right now back inside of index screen inside

21
00:01:24,020 --> 00:01:24,870
of a text element.

22
00:01:24,890 --> 00:01:28,550
And like I just said we can not render out an object directly with react.

23
00:01:28,550 --> 00:01:29,900
We end up with the message.

24
00:01:29,900 --> 00:01:35,990
Exactly like that one right there so this value thing right here is now our list of blog posts it should

25
00:01:35,990 --> 00:01:37,630
be an array of objects.

26
00:01:37,660 --> 00:01:40,940
So I'm going to rename that variable to something that makes a little bit more sense.

27
00:01:40,940 --> 00:01:44,690
I'm going to call it blog posts instead like so.

28
00:01:44,750 --> 00:01:49,730
So now in order to render out that list of blog posts let's import our flat list component and we'll

29
00:01:49,730 --> 00:01:52,480
show our flat list component inside of here.

30
00:01:52,490 --> 00:01:59,160
So from React Native I'll import flat list and then going to remove the text element and I will replace

31
00:01:59,160 --> 00:02:04,660
it with flat list the data that we want to render this flat list with.

32
00:02:04,800 --> 00:02:07,440
So the data prop is going to be blog posts.

33
00:02:07,440 --> 00:02:12,500
That's our array of objects and then go and get myself a little bit of space because we have to pass

34
00:02:12,500 --> 00:02:14,840
in to other props here.

35
00:02:14,970 --> 00:02:17,820
First we have to provide that key extractor.

36
00:02:17,820 --> 00:02:22,390
Remember this is going to be a function that's going to be called with every object inside of our array.

37
00:02:22,440 --> 00:02:26,870
So I'm going to receive that single object that this is going to be called with with an argument they'll

38
00:02:26,880 --> 00:02:33,630
call simply blog post and then from key extractor we have to return a String to be used as a key in

39
00:02:33,630 --> 00:02:36,830
our case we have a unique string right here.

40
00:02:36,840 --> 00:02:38,670
It's the title of every blog post.

41
00:02:38,760 --> 00:02:44,570
So for our flat list we can simply use the title as our key tobacco or inside of key extractor.

42
00:02:44,570 --> 00:02:48,730
I'm going to return blog post dot title.

43
00:02:48,940 --> 00:02:55,180
And then finally after that we'll add in our render item remember this is going to be a function.

44
00:02:55,260 --> 00:03:00,030
It's gonna be called with a argument that is an object that has a couple of different properties on

45
00:03:00,030 --> 00:03:00,690
it.

46
00:03:00,690 --> 00:03:03,150
The only property we care about is the item property.

47
00:03:03,210 --> 00:03:08,490
So going to d structure that off with a set of curly braces like so remember item inside of here is

48
00:03:08,490 --> 00:03:11,960
equal to our individual blog post objects.

49
00:03:12,260 --> 00:03:19,150
So inside of render item I'm going to return a text element in inside the text element.

50
00:03:19,160 --> 00:03:23,920
I will print out item dot title okay.

51
00:03:23,960 --> 00:03:26,030
Let's save this and see how we're doing.

52
00:03:26,060 --> 00:03:30,530
It's all full back over and now I can see blog post number one and blog post number two.

53
00:03:30,560 --> 00:03:33,060
So without a doubt we are now sharing some information.

54
00:03:33,080 --> 00:03:40,100
This array of blog posts from this top level blog provider down into our index screen component all

55
00:03:40,100 --> 00:03:40,350
right.

56
00:03:40,370 --> 00:03:41,710
That's definitely a step forward.

57
00:03:41,720 --> 00:03:45,080
But once again we still just have a static source of data here.

58
00:03:45,140 --> 00:03:49,220
So let's once again take a quick pause when we come back the next video we're going to try to make sure

59
00:03:49,400 --> 00:03:52,610
that a user can somehow add in new blog posts.

60
00:03:52,670 --> 00:03:54,670
So a quick pause and I'll see you in just a minute.