1
00:00:00,810 --> 00:00:05,100
In this video we're gonna write out a quick example using the flattest component so inside of lit Green

2
00:00:05,100 --> 00:00:09,670
Dot J.S. going to first import flat list at the very top.

3
00:00:09,670 --> 00:00:15,400
Like so then inside of my list screen component I'm going to build up some array of objects that I want

4
00:00:15,400 --> 00:00:18,000
to eventually render onto the screen of my device.

5
00:00:18,120 --> 00:00:23,410
So I'm going to create an array inside of here called friends and I'm going to have that be an array

6
00:00:23,440 --> 00:00:29,320
of objects every object is going to have a name property and I'll just give it a name of like friend

7
00:00:29,320 --> 00:00:31,980
number one and two and three and four and so on.

8
00:00:32,000 --> 00:00:36,850
I was going to copy that object down a couple of times and I'll go through and manually change each

9
00:00:36,850 --> 00:00:37,780
of these numbers.

10
00:00:37,800 --> 00:00:44,000
It's a friend one two three four five six seven eight and nine.

11
00:00:44,060 --> 00:00:49,760
So this is the array of records that we want to turn into a list to do so we're going to remove the

12
00:00:49,790 --> 00:00:57,230
text element that we have right here and I'll replace it with a flat list when we place a flat list.

13
00:00:57,230 --> 00:01:02,060
As I mentioned there are two required prompts the first required prompt that we discuss is the data

14
00:01:02,060 --> 00:01:02,500
prompt.

15
00:01:02,720 --> 00:01:06,450
So we have to pass in the array of records that we want to turn into our list.

16
00:01:06,590 --> 00:01:12,140
So a defined flat list right here and I'll define the data properly and pass in the friends array that

17
00:01:12,140 --> 00:01:15,770
I just created right here.

18
00:01:15,850 --> 00:01:19,650
The second required prop is called render item.

19
00:01:19,710 --> 00:01:22,800
It's going to add in render item to my flat list as well.

20
00:01:23,870 --> 00:01:31,410
And this is supposed to be a function that is going to be called with every element out of our array.

21
00:01:31,500 --> 00:01:35,280
Now if I start to add in some more implementation for this function right here this line is going to

22
00:01:35,280 --> 00:01:40,530
get really hard to read really quickly so I might try to multi line this JS sex expression right here

23
00:01:40,980 --> 00:01:47,520
to do so I'll place a set of parentheses around flat list and now right in front of each of these different

24
00:01:47,520 --> 00:01:50,910
props I'll put in a new line character.

25
00:01:51,010 --> 00:01:53,930
So now it's just a little bit easier to read than what we had before.

26
00:01:54,890 --> 00:01:55,140
OK.

27
00:01:55,170 --> 00:02:00,630
So as I was saying this render item right here is going to be called with each individual element.

28
00:02:00,690 --> 00:02:03,870
Now this element argument right here is a little bit misleading.

29
00:02:03,960 --> 00:02:09,360
You might think that this element argument is like going to be exactly this object right here.

30
00:02:09,360 --> 00:02:14,380
Unfortunately it's not the element argument actually has a couple of different properties in it.

31
00:02:14,430 --> 00:02:19,890
So if we were to console log this thing out element would be like this it would have an item property

32
00:02:20,670 --> 00:02:22,890
that was our friend object.

33
00:02:22,890 --> 00:02:27,530
So that's where our name with like friend of number one would come from.

34
00:02:27,700 --> 00:02:34,470
Then it also has an index property as well so unfortunately element is not just the brand object.

35
00:02:34,470 --> 00:02:39,360
Instead it's this rather large object that describes a lot of information about the element that we

36
00:02:39,360 --> 00:02:45,250
are trying to render into a J a sex thing so usually rather than receiving this entire argument right

37
00:02:45,250 --> 00:02:51,070
here we instead usually just pull off the item property which is the actual object that we have inside

38
00:02:51,070 --> 00:02:57,690
of our array up here to just pull off that item property will usually make use of yes 2015 D structuring

39
00:02:58,090 --> 00:03:03,220
so rather than writing out the full word element we can place a set of curly braces inside those prints

40
00:03:03,610 --> 00:03:05,650
and then just write out item.

41
00:03:05,680 --> 00:03:10,120
That means we're going to get a direct reference to this item property which effectively will be our

42
00:03:10,120 --> 00:03:13,300
friend object that has a name inside of it.

43
00:03:13,300 --> 00:03:21,100
So now if we did a console log of item by itself it would be just name with like friend number one or

44
00:03:21,100 --> 00:03:24,120
whichever friend it is okay.

45
00:03:24,160 --> 00:03:28,840
So usually whenever we build out a list like this we're just going to d structure off that item property

46
00:03:29,780 --> 00:03:35,140
it's now inside of this function we have to return some amount of J.S. X that's going to describe how

47
00:03:35,140 --> 00:03:38,040
we want to show this item right here on the screen word.

48
00:03:38,050 --> 00:03:45,630
This friend as it were so in this case we might just try to show some a little bit of text then inside

49
00:03:45,630 --> 00:03:52,120
that text we can make use of those curly braces to print up a javascript variable inside their remember

50
00:03:52,270 --> 00:03:57,610
item is going to essentially be this object then this object and this object and so on.

51
00:03:57,640 --> 00:04:01,450
So if we want to just print up the name we would reference inside those curly braces.

52
00:04:01,450 --> 00:04:05,790
Item dot name and that's pretty much it.

53
00:04:05,920 --> 00:04:09,690
OK so now this right here is going to show a list on our screen.

54
00:04:09,690 --> 00:04:13,140
However it's also going to result in a warning message.

55
00:04:13,140 --> 00:04:15,380
We're going to say this right here and test it out.

56
00:04:15,420 --> 00:04:17,770
I just want you to know that we are going to see a warning message.

57
00:04:17,790 --> 00:04:20,400
We'll discuss exactly what it means in just a moment and then fix it up.

58
00:04:21,290 --> 00:04:21,550
OK.

59
00:04:21,580 --> 00:04:26,960
I'm going to save this and I'll flip back over and there's my list right there.

60
00:04:27,000 --> 00:04:31,500
Now if you tried to scroll through this you're going to notice that it actually has some scrolling functionality

61
00:04:31,950 --> 00:04:37,550
so I can kind of scroll through my list of elements right away and if you're on android you'll see something

62
00:04:37,550 --> 00:04:43,610
like that in the list on Android is not going to be scroll on ISIS lists are usually kind of bouncy

63
00:04:43,610 --> 00:04:46,540
scroll like this but on Android that's not the case.

64
00:04:46,550 --> 00:04:51,280
So if you are on Android and you can't scroll the list at all that's totally fine OK.

65
00:04:51,280 --> 00:04:53,740
So clearly we can now show a list of elements on the screen.

66
00:04:53,740 --> 00:04:56,610
But as I mentioned we've got a warning down here.

67
00:04:56,610 --> 00:05:00,220
So the warning says virtualize list missing keys for items.

68
00:05:00,240 --> 00:05:04,210
Let's have a quick pause right here and we'll discuss exactly what this warning message is talking about

69
00:05:04,210 --> 00:05:05,230
in the next video.

70
00:05:05,290 --> 00:05:09,940
We'll also kind of do a discussion round the flat list component in general and understand better what

71
00:05:09,940 --> 00:05:11,380
is really doing behind the scenes.