Now that we've got our list of posts inside of our post list component we can start to display these
things on the screen.
All right.
I'm going to take a second method or third method I suppose inside of my class.
This is going to be called render a list.
And as you might imagine I'm going to stuff a ton of logic into this thing to take my list of posts
and render them out.
I'm putting all this logic into this helper method of render list just to keep the render method itself
nice and easy to read.
So inside of render list I'm going to return this stuff prop stock posts.
I'm going to map over it and for every post we are going to return a pretty good blob of GSX.
Now as a quick reminder we're making use of semantic UI here.
So on the GSX block we're about to write out.
I'm going to add in a pretty good amount of class names in all these class names are just references
to semantic UI and just trying to get stuff to appear on the screen and look pretty nice.
So I'm going to return a div with the class name of item.
I'm going to remember to give this thing a key property.
Remember that every post that we fetch from that from that API has an ID associated with it and wherever
possible we'd like to use that Id associate with each record as our key property cell say post.
Id like so then I'll close off that div.
Then inside of here I'm going to put in a icon.
If we take a look at our mockup really quick just as a reminder I don't saw the mock up up.
I don't know that the mock up up.
I'm not going to waste any time but essentially on the left hand side of every post we want to show
that icon.
Kind of like of a user or something like that so I'm going to put an italics here with a class name
of large middle Alliant icon user like so
after the tag I'll put down a div with the class name of description.
This is not description but content that's better.
And then inside of that div I want to get a class name description.
Inside of the description div or put down an H to that has the post-up title says the title of the post
and then underneath it will put a paragraph tag with the actual post content which is post-cart body.
Now I'm not making up these two properties right here.
You'll recall that we looked at that post and point just a little bit ago.
Over on the Jason placeholder website.
So if we go down just a little bit here is that posts and point I can open it up and I see that every
post has that title and body.
So that's why we specifically put post-START title and post body OK.
That looks pretty good.
I think that we've got everything we need for right now.
I need to do is make sure that I call render list for my render method.
So I'm going to go down to the render method.
I will remove the console lock.
I'm going to give this div a class name of UI relaxed divided list and then inside the div itself I
will remove the hard coded text a post list and I will replace it with this dot render list.
OK I think that's just about it.
I'm going to save this file and then I'm going to flip back over to my application and we can see the
list of posts appear on the screen.
Awesome.
All right so this definitely looks good.
We're definitely loading up some data and showing it on the screen appropriately.
Last thing we do is make sure that we show the title of the user or the author's name right underneath
the post.
So let's I'm going to try again.
I'm pretty sure I got that diagram up here.
I apologize for not having it.
Here we go.
That's better.
OK so we've got the post list put together.
Remember we had said that we wanted to make a separate component called user header and show it at the
bottom of each post.
So we still have to tackle that.
Let's take a quick pause and we'll start to figure out how we're going to address this problem in the
next video.