If you look at the response object, we can grab the response, and then traversing the tree, we can move down, we can grab the data, and then inside of the data, we can grab the portfolio_blog.

That is what we're gonna be able to use to populate our local item state, so that's what we're gonna do in this guide, so open up your code editor, and we can see that we have an empty object that starts out for our blogItem, so that is what we are going to update.

So inside of our response block, I'm gonna say this.setState and then setState, I am going to set the blogItem, and we're gonna set it equal to the response.data.portfolio_blog, and let me get rid of the console.log statement here,

blog-detail.js

  .then(response => {
    this.setState({
      blogItem: response.data.portfolio_blog
    });
  })
  .catch(error => {
    console.log("getBlogItem error", error);
  });
}

and let's see if this works and see if it populates our state, and remember, we can test this out a few different ways. You could always simply call it from the render method, but I really want you to get in the habit of using your React dev tools.

The React dev tools are some of the most powerful dev tools in your arsenal, for being able to build out React applications, so it's definitely good to be in the habit of working with them, so I'm gonna go into the dev tools inside of the console here, and let's select the BlogDetail, and there we go.

So I'm gonna grab the BlogDetail, and let's see what the state's set up to, and also, as a quick aside, do you notice with our props, this is going back to our discussion from a guide, or a couple guides ago, where we saw that we had to pass in props, and we had to call Props, even though we weren't directly passing them in ourselves, from our parent component.

Notice how we still have access to Props right here, and you can see that in the React dev tools, this is how we get things like the match and the params and the slug. Right here, this is showing us exactly how we're grabbing that ID, so that is something that is important to know.

But let's move down, because this guide's all about grabbing the response, so you can see we have our state, we have our blogItem, and our currentId. If you click on blogItem, you'll see that this has now been properly populated. We have each one of those keys. We're only gonna use a few of them, but let's go and see what we want.

We want the blog_status so that we know if it's a draft or if it is a published guide, we want the content, we want the featured_image_url, and then from there, we don't really need the ID we already know what it is because we have our currentId, and then, we need the title.

So those are the attributes that I wanna grab, and so I'm going to keep this open just so I can reference this, so let's go into Visual Studio Code and I'm gonna use de-structuring here, so inside of our render method, I'm gonna say const, and then inside of curly brackets, here, I'm gonna grab the title, and then from there, I want the content, the featured_image_url, and then I believe the first one, blog_status, and I believe that's it, yes, so blog_status.

Okay, and remember how you use de-structuring. You use the const keyword, followed by curly brackets, each one of the names of the attributes, and these have to be exact, they have to line up, that's the way de-structuring works, and then we're gonna set this equal to this.state.blogItem.

So it's going to reach into that blogItem object and it's just going to pull out and automatically assign each one of these values, so inside of our h1 tag here, I'm going to get rid of our hard-coded value and inside of a single curly bracket, I'm going to call the title. For right now, let's just leave it at that.

blog-detail.js

  render() {
    const {
      title,
      content,
      featured_image_url,
      blog_status
    } = this.state.blogItem;

    return (
      <div>
        <h1>{title}</h1>
      </div>
    );
  }
}

I'm gonna hit save and if you come back to Google Chrome, you can see we are getting the correct title.

If you go back to the blog index page, you can click on any of the blog items, and you'll see it's pulling in the title, so that's working perfectly.

Now let's populate the rest of the data. We know we have a content and we have a featured image, I'm not gonna worry about calling the blog_status quite yet but it's good to know that we have it there.

The next thing that we're gonna use is the image, so we can use just a regular image tag with the source, and inside of a curly bracket, we're just gonna call the featured_image_url and then make sure you close off that image. This is gonna come up either very big or very small. It's gonna be whatever the size of the image is, so don't worry about the styling yet. We'll take care of that in one of the next guides, and then lastly, I'm gonna create just an empty div, and then we're gonna call the content inside of curly brackets.

  render() {
    const {
      title,
      content,
      featured_image_url,
      blog_status
    } = this.state.blogItem;

    return (
      <div>
        <h1>{title}</h1>
        <img src={featured_image_url} />
        <div>{content}</div>
      </div>
    );
  }
}

Okay, so we'll hit save, and let's see what we have. So here, we have the title, we have the image that's being called properly, and then our content, and I could come to any of these other items, and I'm gonna click on this Some ost example one because this has a lot more content, so if I click on this one, you'll see that we have our featured image here, and then we have all of this content down here, so this is working very nicely, so great job if you are doing this.

We now have followed a very similar pattern, so hopefully, it's starting to feel a little closer to second nature for you, where we've created a component, the component has called an outside API, that API sends data back to us, and then from there, we render the data out into the screen after putting it inside of that local component state, so great job if you went through that. You now know how to render your blog post items, and in the next few guides, we're gonna style this up so that it looks nice.

Resources

• Source code