In the last section we started wiring up a flat list component which is going to render our list of
libraries onto the screen of our device.
We now have to make sure that we provide a component right here that will be displayed for each individual
library.
Now I definitely expect to eventually have a lot of logic tied to rendering each library on the screen.
So rather than just kind of putting together some GSX directly right here that's going to decide how
to show each row individually.
Let's make a separate component that's going to house all the logic to represent or display one single
library.
So I'm going to make a separate component by making a new file inside my components directory and I'm
going to call this list item.
J.S. than inside of here.
We're going to put down a little bit of boiler plate stuff to get a component to show up on the screen.
So I'll say import re-act and component from react or then create a new class that will call list item
which is going to extend component and then inside they are all defined by rendered method leave the
render method empty right now.
Let's first set on our export statement at the bottom and then I'm also going to go ahead and flip back
over to our library list file and I'm going to wire this thing up to the library list.
So back over inside of library list J.S. at the top I'm going to import that new component that we just
created.
So the import list item from list item.
And then inside of render item right here we're going to return an instance of a list item and for every
list item we're going to pass in the library that we're trying to render as a prop called Library.
Like so.
All right.
So that's it.
Now let's take another quick break.
We'll come back to the next section and we're going to start working on the actual implementation of
this list item component.