1
00:00:00,990 --> 00:00:05,300
In the last section we started wiring up a flat list component which is going to render our list of

2
00:00:05,300 --> 00:00:08,000
libraries onto the screen of our device.

3
00:00:08,000 --> 00:00:12,860
We now have to make sure that we provide a component right here that will be displayed for each individual

4
00:00:12,860 --> 00:00:13,840
library.

5
00:00:13,850 --> 00:00:19,500
Now I definitely expect to eventually have a lot of logic tied to rendering each library on the screen.

6
00:00:19,520 --> 00:00:25,340
So rather than just kind of putting together some GSX directly right here that's going to decide how

7
00:00:25,340 --> 00:00:27,560
to show each row individually.

8
00:00:27,560 --> 00:00:33,560
Let's make a separate component that's going to house all the logic to represent or display one single

9
00:00:33,560 --> 00:00:34,600
library.

10
00:00:34,700 --> 00:00:40,220
So I'm going to make a separate component by making a new file inside my components directory and I'm

11
00:00:40,220 --> 00:00:43,050
going to call this list item.

12
00:00:43,060 --> 00:00:46,220
J.S. than inside of here.

13
00:00:46,250 --> 00:00:51,940
We're going to put down a little bit of boiler plate stuff to get a component to show up on the screen.

14
00:00:52,100 --> 00:01:02,010
So I'll say import re-act and component from react or then create a new class that will call list item

15
00:01:03,620 --> 00:01:09,620
which is going to extend component and then inside they are all defined by rendered method leave the

16
00:01:09,620 --> 00:01:11,220
render method empty right now.

17
00:01:11,240 --> 00:01:18,080
Let's first set on our export statement at the bottom and then I'm also going to go ahead and flip back

18
00:01:18,080 --> 00:01:23,190
over to our library list file and I'm going to wire this thing up to the library list.

19
00:01:23,510 --> 00:01:29,210
So back over inside of library list J.S. at the top I'm going to import that new component that we just

20
00:01:29,210 --> 00:01:30,010
created.

21
00:01:30,190 --> 00:01:34,200
So the import list item from list item.

22
00:01:34,520 --> 00:01:42,440
And then inside of render item right here we're going to return an instance of a list item and for every

23
00:01:42,440 --> 00:01:48,290
list item we're going to pass in the library that we're trying to render as a prop called Library.

24
00:01:48,350 --> 00:01:50,470
Like so.

25
00:01:50,520 --> 00:01:50,760
All right.

26
00:01:50,760 --> 00:01:52,110
So that's it.

27
00:01:52,110 --> 00:01:53,670
Now let's take another quick break.

28
00:01:53,670 --> 00:01:57,060
We'll come back to the next section and we're going to start working on the actual implementation of

29
00:01:57,060 --> 00:01:58,430
this list item component.