In this guide, we are going to extend that functionality and we're actually going to take the bits and pieces that we want from that data, and we're gonna render it on the screen. So let's walk through that process, and I'm also going to show you a few little efficiency kind of hacks that I personally use. So it's up to you if you like these or not, but they work well for me.

So if I were tasked with building this out, and I was at this point where we're console logging some data coming back from the server, and I wanted to render those items out, the first thing I would do, is I'd look at the response, I'd make sure that I understood the path here because we're first gonna add this to state, so I know that I'm gonna grab the response, data, and then the name which is portfolioItem, and then that has all of these keys, so banner_img_url, all the way through down to URL.

So I'm going to kind of keep that in mind, and I'm going to actually copy all of these, just like this, and then inside of Visual Studio Code here, I'm going to paste those in and for right now, I'm just gonna make those a comment. And so you'll see in a few minutes why I'm doing this cause it really helps save some time and also prevents any typos.

So now that we know what kind of data we're working with, now we can go down into our get portfolio item function, and instead of console logging the data, now I'm gonna say this.setState and then I'm going to set state with the data that we want. I'm gonna call this portfolioItem and then we're going to grab that from response.data.portfolio_item, that's what the server sends back, and then we need to define a starting base state so that we don't have a warning here, so I'm gonna come up into the constructor, and say this.state and we're gonna start with portfolioItem, being an empty object.

portfolio-detail.js

export default class PortfolioDetail extends Component {
  constructor(props) {
    super(props);

    this.state = {
      portfolioItem: {}
    }
  }

.then(response => {
  this.setState({
    portfolioItem: response.data.portfolio_item
  })
})

So now when we refresh the page, we should have a portfolio item that is stored in state and that we can work with. So hit save, and now it's trying to grab all of this content. So I'm gonna come here, I'm going to cut all of this out from the top and we know that we need to render this out on the screen and so I want to reach into state and we're gonna use destructuring to grab each of these values.

So inside of the render statement, I'm gonna say const, and then in curly brackets, I'm going to paste in all of those items. So you do not have to follow along with this part, this is simply the process I personally follow and have found it really helps to prevent against things like having to go back and forth and checking key names or maybe mistyping something, or anything like that.

So I'm gonna grab each one of these, I will uncomment them as well so that we don't have to worry about that. And now I'm just going to grab the key itself. So I'm gonna say I do want the banner_img_url, I want the category, I don't care about this column_names_merged_with_images, I want the description. I don't care about the ID, maybe I want the logo_url, definitely want the name, I don't care about the position, thumb_img_url maybe? We might want that, and then lastly, the actual URL.

So I'm going to take all of those keys and we're gonna use destructuring and set that equal to this.state.portfolioItem, hit save and now we can treat each of those values as a variable.

render() {
  const {
    banner_image_url,
    category,
    description,
    logo_url,
    name,
    thumb_image_url,
    url
  } = this.state.portfolioItem;

So if you come down into the h2 here, instead of having this hardcoded value, I want to simply call name and then let's give a paragraph tag and let's call the description.

return (
  <div>
    <h2>{name}</h2>
    <p>{description}</p>
  </div>
);

And let's see if that is working. If you come back to the page, you can see, yes that is working beautifully.

We now have our name coming in from the API along with the description. If you click on home and navigate to any of your other portfolio items, then you should see all of those popping up, and they should all be dynamic, so that is working really nicely.

In the next guide, what I want you to do between this video and the next one, I want you to plan out what you want your portfolio item to look like. So you can reach back into your knowledge on what we studied with UI and UX, and plan out the layout you want for this page, and so that's a reason why I'm not going into that right now because you now know all the data you have to work with.

You know the image types you have to work with, you know, the text, all of those things and so what you can do now is plan your layout out. So do that between this video and the next one and if you feel like it, even go and implement it yourself. You have all of the tools necessary in order to do that, so I recommend for you to go ahead with that now and in the next guide, I'm gonna show you my personal solution.

Resources

• Source code