So are create post form is all done all we need to do now is make sure that we can see our completed 2
blog posts on our index view right here. 3
So right now we've just got some boilerplate that says list of blog posts we really need to make sure 4
that this shows all of the different blog posts that we've got in our application. 5
So we've already created an action creator that will fetch all of our posts right here. 6
All we need to do is make sure that our component renders them and you can see that we're also already 7
calling the action creator to fetch the posts. 8
We just need to implement our map state to proper function and map our state onto the props of this 9
component and then go ahead and render them. 10
So let's go ahead and take care of that and this section should be pretty straightforward. 11
We've definitely done this several times before. 12
So we'll start off by mapping our state to our process so a function mapped state to props 13
and then from here where would turn an object will have the posts show up as this props posts inside 14
of our component and then if you recall our posts are available on our state as states dot PPOs dot 15
. 16
All this is our list of post right here. 17
And then we just need to remember to add this function to our connect function right here. 18
So we're not going to be doing Noll anymore. 19
We'll do map state to props like So 20
next we'll go ahead and add a helper function inside of the component to build our list. 21
Let's go ahead and add a place to call it first. 22
So let's take out the boilerplate text right there and add in a header and we'll just say that it'll 23
save posts and then we'll put in a UL with a class name of list group. 24
And then inside of the UL we'll do our list builder this dot render posts which will implement right 25
now. 26
So we've got our unordered list right here. 27
And then inside of it it will be our list of all of our different blog posts. 28
So I will say read your posts. 29
So remember our list of posts is available as an array as this props posts so will return from here 30
. 31
This prop's posts and then we'll map over that list and for each post will return an ally 32
so we'll do an ally with a class name of list group item. 33
And don't forget we need a key on here as well. 34
The key is required when ever we render a list with react as the key will go ahead and use the post 35
ID since it will always be a unique ID. 36
So the Post dot Id remember this ID right here is coming from the back end so the back end generates 37
the ID and it passes it down to us. 38
So this is just a piece of data off the actual post object. 39
So we'll do a span with the class name of poll access right. 40
And this will be our post dot categories so I will just show the categories of the post and then we'll 41
add in the strong around our Post dot title. 42
OK so let's go ahead and refresh the page and we got our posts and each of our posts that we've created 43
so far you can see my first blog post. 44
Another one Altoids are great blah blah blah blah blah. 45
So this was looking pretty darned good so far. 46
I like this. 47
Remember the intent though. 48
A user should really be able to go ahead and click on these items and then go to a detail page for that 49
particular post. 50
As you might imagine all we need to really do is set up a link component to link the user from clicking 51
on this over to the show detail. 52
Let's go ahead and take care of that in the next section.