2.2 Creating the Post Component

In the previous session, we made a request to our WordPress installation in order to retrieve all of our posts. And we saw how data was structured, we even wrote a quick little class to make it a little bit easier to get to that information. And we wrote our first component, it wasn't much it's just for displaying our applications. So, in this lesson, we want to actually do something with the data that we are requesting. We want to display our list of posts. So, we're going to do two things, we're going to create a post list component and a post component. Of course a post list is going to be a a list of posts. So let's start right here, within our app component, because inside of this component we want to make our request to retrieve our posts, so that we can pass those posts onto our post list. So let's write our constructor first, and we of course want to call Super before we do anything else. And we are going to use state here. We are going to retrieve our posts and store those posts as the state of this component. So let's go ahead and initialize our state with a posts property, we will initialize that as an empty array. And that's really all that we need to do inside of our constructor. So now we want to make our request, and we will do that whenever the component did mount method. So we will create our API object, we will use it to retrieve our posts, and then set the state. So that will look like this. We will new up API, and then we will say API posts, then we will have our data which we will then use to set the state. So, we'll set this set state, we'll set posts equal to that data. So, that's going to give us our posts and whenever we have our posts lists we can then pass that information on to our post list. So let's go ahead and change our title here. Let's just say, Welcome to Headless WordPress. Let's also make this an h1 instead of an h3, just so that this is the title of our website, and really, right after this is where we would put our PostList. So we could do something like this, we'll say, PostList, then we'll say, posts, and then pass it our state. So we'll say, state.posts, and really, that's all that we need to do with that, at least right now. So, we just need to ride to that PostList component. So, let's add a new file to our source folder, let's call it post-list.js. And we need to decide how we want to write these components. Now we could write them as classes but that also implies that there is some state for these components. And, at least in my mind right now, I can't think of a good reason to have state for these components because this is just for displaying information. The information isn't going to change, and if it does, well then it's going to rerender anyway, thanks to our app component. So we can write these two things as just normal functions, and let's do that. We can always change it if we decide that we want some stateful components here. So let's start with our Post. We're going to receive our props, and this is going to be very simple. We're just going to display our Post information. So we need to wrap everything within an element, so let's use a div element and let's give it a class of row. And we're just going to display our title and our content. So let's use an h3 element for the title. Let's go ahead and do that and we will say props.title.rendered. Because if you'll remember, whenever we looked at the structure of our data, we had a title property but we also had a rendered property there. And the same is true for our content, now we need to set the inner HTML for our content, because our content is going to contain HTML. At the very least it's going to contain our content surrounded by an opening and closing P tag. So, we need to, dangerously, set the inner HTML, so that's what we will do with dangerously set in our HTML. We of course, need __html, and then our content, so props.content.rendered and that's really it for this component. It's very simple, we are just displaying information and the same is pretty much true for our PostList. Now if we wanted to, we could export both of these components, but at this point in time I don't see a reason to export the post component. So we're just going to export default our function PostList, we will receive our props. And what we want to do is iterate over all of our posts and then create a post component for each one of those posts so that we can then output that. So let's create a variable called posts. We'll say props.posts.map, and if you iterate, you of course want a key property on whatever component that we are iterating. So we're going to get both the post and the index and we will use the index as the key. So really this is just going to use our post component. We'll set the key equal to our index and then we will spread our post so that is really going to be that. At least as far as iterating over our posts, we of course want to render all of this. So we're going to return and let's just wrap this within a div element. So we'll just say posts, and then we will close that div element and that should be fine. So, now we need to go back to our app.js file, we need to import our PostList, so let's do that. From and then PostList, and we should be good to go. We will definitely see if this works or not. So let's head over to the browser, and voila. We see our title and then we see our post. Now at this point in time, we only have one post, so let's go and let's write another one. And let's see, user, password, and let's add new, doesn't matter what this is going to contain, so this is the second post. And as far as the content, this is the content, for the second post, hurrah. And let's publish this, so we should have two posts now that are published. If we go back to our application, let's refresh, and there we see our two posts. So now that we are displaying this information it will be nice to be able to navigate between our post list and our individual post. And we will do that in the next lesson.