In this video we're going to set up a little goal for ourselves right now just sharing some information
that's just like an array of numbers or a simple number is not super useful.
So instead I want to imagine that we're going to create a list of blog posts I want to communicate.
That list of blog posts from this blog provider down to our index screen and then inside of our index
screen.
I want to render that list of blog posts out inside of a flat list component as opposed to the plain
text we have right now.
So to get started back inside of blog context I'm going to create a new list of blog posts right here.
So going to say concept blog posts and we're going to create an array of objects where each object represents
one blog post.
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
of blog post number two.
Now I want to communicate this information from our blog provider down to any nested component.
Remember to do so all we have to do is take that information and add it in to this value prop on the
blog context provider.
So going to delete that array of numbers and I will replace it with blog posts and I'll save this file.
Now if you save this file you'll probably see an error message.
Back over here.
So it says objects are not valid as a real child remember.
That's because we are trying to show an array of objects right now back inside of index screen inside
of a text element.
And like I just said we can not render out an object directly with react.
We end up with the message.
Exactly like that one right there so this value thing right here is now our list of blog posts it should
be an array of objects.
So I'm going to rename that variable to something that makes a little bit more sense.
I'm going to call it blog posts instead like so.
So now in order to render out that list of blog posts let's import our flat list component and we'll
show our flat list component inside of here.
So from React Native I'll import flat list and then going to remove the text element and I will replace
it with flat list the data that we want to render this flat list with.
So the data prop is going to be blog posts.
That's our array of objects and then go and get myself a little bit of space because we have to pass
in to other props here.
First we have to provide that key extractor.
Remember this is going to be a function that's going to be called with every object inside of our array.
So I'm going to receive that single object that this is going to be called with with an argument they'll
call simply blog post and then from key extractor we have to return a String to be used as a key in
our case we have a unique string right here.
It's the title of every blog post.
So for our flat list we can simply use the title as our key tobacco or inside of key extractor.
I'm going to return blog post dot title.
And then finally after that we'll add in our render item remember this is going to be a function.
It's gonna be called with a argument that is an object that has a couple of different properties on
it.
The only property we care about is the item property.
So going to d structure that off with a set of curly braces like so remember item inside of here is
equal to our individual blog post objects.
So inside of render item I'm going to return a text element in inside the text element.
I will print out item dot title okay.
Let's save this and see how we're doing.
It's all full back over and now I can see blog post number one and blog post number two.
So without a doubt we are now sharing some information.
This array of blog posts from this top level blog provider down into our index screen component all
right.
That's definitely a step forward.
But once again we still just have a static source of data here.
So let's once again take a quick pause when we come back the next video we're going to try to make sure
that a user can somehow add in new blog posts.
So a quick pause and I'll see you in just a minute.