In this video we're gonna write out a quick example using the flattest component so inside of lit Green
Dot J.S. going to first import flat list at the very top.
Like so then inside of my list screen component I'm going to build up some array of objects that I want
to eventually render onto the screen of my device.
So I'm going to create an array inside of here called friends and I'm going to have that be an array
of objects every object is going to have a name property and I'll just give it a name of like friend
number one and two and three and four and so on.
I was going to copy that object down a couple of times and I'll go through and manually change each
of these numbers.
It's a friend one two three four five six seven eight and nine.
So this is the array of records that we want to turn into a list to do so we're going to remove the
text element that we have right here and I'll replace it with a flat list when we place a flat list.
As I mentioned there are two required prompts the first required prompt that we discuss is the data
prompt.
So we have to pass in the array of records that we want to turn into our list.
So a defined flat list right here and I'll define the data properly and pass in the friends array that
I just created right here.
The second required prop is called render item.
It's going to add in render item to my flat list as well.
And this is supposed to be a function that is going to be called with every element out of our array.
Now if I start to add in some more implementation for this function right here this line is going to
get really hard to read really quickly so I might try to multi line this JS sex expression right here
to do so I'll place a set of parentheses around flat list and now right in front of each of these different
props I'll put in a new line character.
So now it's just a little bit easier to read than what we had before.
OK.
So as I was saying this render item right here is going to be called with each individual element.
Now this element argument right here is a little bit misleading.
You might think that this element argument is like going to be exactly this object right here.
Unfortunately it's not the element argument actually has a couple of different properties in it.
So if we were to console log this thing out element would be like this it would have an item property
that was our friend object.
So that's where our name with like friend of number one would come from.
Then it also has an index property as well so unfortunately element is not just the brand object.
Instead it's this rather large object that describes a lot of information about the element that we
are trying to render into a J a sex thing so usually rather than receiving this entire argument right
here we instead usually just pull off the item property which is the actual object that we have inside
of our array up here to just pull off that item property will usually make use of yes 2015 D structuring
so rather than writing out the full word element we can place a set of curly braces inside those prints
and then just write out item.
That means we're going to get a direct reference to this item property which effectively will be our
friend object that has a name inside of it.
So now if we did a console log of item by itself it would be just name with like friend number one or
whichever friend it is okay.
So usually whenever we build out a list like this we're just going to d structure off that item property
it's now inside of this function we have to return some amount of J.S. X that's going to describe how
we want to show this item right here on the screen word.
This friend as it were so in this case we might just try to show some a little bit of text then inside
that text we can make use of those curly braces to print up a javascript variable inside their remember
item is going to essentially be this object then this object and this object and so on.
So if we want to just print up the name we would reference inside those curly braces.
Item dot name and that's pretty much it.
OK so now this right here is going to show a list on our screen.
However it's also going to result in a warning message.
We're going to say this right here and test it out.
I just want you to know that we are going to see a warning message.
We'll discuss exactly what it means in just a moment and then fix it up.
OK.
I'm going to save this and I'll flip back over and there's my list right there.
Now if you tried to scroll through this you're going to notice that it actually has some scrolling functionality
so I can kind of scroll through my list of elements right away and if you're on android you'll see something
like that in the list on Android is not going to be scroll on ISIS lists are usually kind of bouncy
scroll like this but on Android that's not the case.
So if you are on Android and you can't scroll the list at all that's totally fine OK.
So clearly we can now show a list of elements on the screen.
But as I mentioned we've got a warning down here.
So the warning says virtualize list missing keys for items.
Let's have a quick pause right here and we'll discuss exactly what this warning message is talking about
in the next video.
We'll also kind of do a discussion round the flat list component in general and understand better what
is really doing behind the scenes.