I don't have it started yet so I am going to go over here and make sure it's started. Now I'm going to check this in the browser and basically, we got these posts rendering in the last guide but we want to develop a component so we can make this a little more readable in our code and not so much code in one file. So right now we're just returning a list for the key with the index what we want to do is instead return a post. So let's create that component by going to our components directory and make a component called post.js and let's just type out our code. So import React, { Component } from 'react', class Post extends Component render. And in here we just want to return a list tag and what we'll do is just copy our code in. So let's export it real quick export default Post;. Now let's get back to our recent posts and just take this

cut it out and pasted in here.

Now we won't be applying the key to this will do that to the actual component. So let's get rid of key index and let's head over to recent posts and let's import this, import Post from './post'. Then let's just call it in here let's say Post and then let's say the key = {index} and let's close that off.

Let's test this out in the browser and see if we're getting the same information. Okay, it looks like nothing's rendering and we might have an error. I'm going to open up my console and it says post is not defined and it says the above error occurred in the component Post is not defined. So basically let's see what happened ./post. We are in recent post and it should be there. Let's go to the post and let's see. Okay so the reason it's doing this is because we're trying to say post.title in the jsx here in our post component but we don't have a post and we don't have a post in our props. So what we have to do is instead is say this.props.title and then we have to provide a title. So if we go to recent posts we could just say title is equal to post dot title or since we know this is already called title. We could just use the spread operator and say dot dot dot post and it will give our post all of the post attributes. So if you look at our response basically it's going to provide each one of our post components instances.

With all of these pieces of data so it can have an id, a title, and content. So let's go ahead and put in the rest of the content and I'll talk about how this is working in the next guide so we can separate this into a couple guides to make it a little more focused and simple. Let's just commit our code and get into it.

git status
git add .
git commit -m "created a post component"

Let's hop into the next guide where we will finish up the post component.

Resources

Source Code