Now, this is once again gonna be a review because we've already been bringing in our portfolio items right here onto the homepage. So once again, to be able to help with some reinforcement learning, I highly recommend that you pause the video right now and you build this feature because everything that we're gonna go through in this guide we have already done before.

And you don't even have to worry about rendering these items out yet, in this guide, all I want you to do is to call the API, to bring the portfolio items in, to update your state, and for all of this to happen automatically whenever this component is loaded. So that means you're gonna have to update state, call the API, and also use a lifecycle hook.

So I recommend that you go and do that because even though me telling you that you may think, "Oh yes, we've done all that before. "I could do that in my sleep," I can promise you unless you're a React professional, saying it is very different than doing it.

So I'd recommend that you'd go out and build it first, and then you can watch my solution. So I'm gonna get into how I would personally build this out. I'm gonna open up Visual Studio Code and I'm gonna start by creating a constructor method here.

So I'm gonna say constructor, I'm not gonna take in any props or anything. And I'm gonna call super, and then from there I'm gonna set up some state. So I'll say this.state equals, and the state object here is gonna equal portfolioItems which I will set up as an empty array, and that's all I need to put in the constructor right now.

Now, we're gonna make an API call, so let's also import Axios. So I'll say import Axios from Axios and now let's build out that method. So now let's call this method getPortfolioItems(), it's not gonna take in any arguments, and then we'll call axios.get and then we'll call the URL.

Now this URL, you can access the same one that you're accessing on the home page. It's HTTPS slash slash and then whatever your subdomain is in DevCamp, so for me it's jordan.devCamp.space and then portfolio and then portfolio_items. And from there, make sure we're passing in as an object with credentials true. If I hit save, prettier, updates the styling, and everything's good.

portfolio-manager.js

getPortfolioItems() {
  axios.get("https://jordan.devcamp.space/portfolio/portfolio_items", { 
    withCredentials: true
  });
}

Now, from there because that is a promise, now we need to receive it. So I'll say then and I'm going to get the response and call an anonymous function which I'll use with an arrow function and let's just console log this out just to see what we have. So I'll say console log response from get portfolio items, and that's all I need to do right now.

And then if there are any errors, I want to catch that error, pass it an anonymous function, and we'll just console log that as well. So error in and I'll just copy the function name, if you're wondering why I put this in there it's just for our purposes.

There's nothing specific about this but because we have a few catch statements throughout the application, if that error pops up I do wanna be able to see exactly where it's occurring. So that's why I put that in there, and then I will also print out the error itself.

Okay, so if we do this and run it and go to the page, nothing is going to happen because we also have to call this function. So I need to use a lifecycle hook and in this case, I'm gonna use the componentDidMount, just like that, and call this.getPortfolioItems, call that function. And then every time that component mounts it is going to call this process.

getPortfolioItems() {
  axios.get("https://jordan.devcamp.space/portfolio/portfolio_items", { 
    withCredentials: true
  }).then(response => {
    console.log("response from get portfolio items", response);
  }).catch(error => {
    console.log("error in getPortfolioItems", error);
  })
}

componentDidMount() {
  this.getPortfolioItems();
}

So let's test all of this out, we'll go into the browser, open up the console, and do not worry about this right here. Once again, we're gonna wait until we add the blog manager until we clear out that warning. And we got the response back but it looks like I didn't actually add it in. That'd be nice to see what actual data we're getting. So response hit save, and there we go.

Now we're getting data. We're getting data, portfolio items, which is of type array, so that is perfect. And you can see we're getting 12 items back.

You'll be getting as many as you have in DevCamp Space for your account. So that is good, that's working. Now, remember, we have one more thing we need to do. Instead of just console logging this out we want to update the state. Because what I'm wanting to do, in the next guide we're gonna be creating a portfolio item or a portfolio thumbnail component and then I wanna be able to pass to that sidebar component, I wanna pass this array.

Then it will have the job of iterating over each one of those items, rendering the image and those kinds of things out. So now that we know what the goal is, let's update this state so that we can actually use it and pass it to other components.

So I'm gonna clear out that console log statement and I'll say this.setState. And remember, whenever we're working with collections and updating an array within the state, we have a kind of a tricky syntax. So I'm gonna say this.setState and then inside of here say portfolio items.

And then portfolio items is going to have an array, and so I'm gonna say ... which is our spread operator, response.data.portfolio items, which you saw there in the console log statement, and then that should be it. So this should update the portfolio items and pass in an array, and then this should update state so our portfolio item state should have each one of those 12 records.

The reason why I'm having to use the spread operator is because remember that we're getting an array. If I simply said, okay, I am going to have portfolio items equal response.data.portfolio_items, we'd be essentially just having a single array where we actually want 12 items, we want an array that has 12 records inside of it.

The spread operator breaks that array up into those 12 items, that's why we're using that. Okay, now let's switchback, and hit refresh just to make sure it calls it again. And now, let's open up our React tools, we haven't looked at them in a while.

So I'm going to open up the browser dev tools, go to React, and then we can, instead of going down the full tree I'm going to use the inspector and just click on anywhere inside of this general portfolio form area, scroll up, click on the portfolio manager component here, and then if you look on the right-hand side we have state of portfolio items.

And you can bring this to the left and now you can see it's filled with an array of 12 records. Each one of these is one of our portfolio items. It has the image, it has category, description, logo, everything like that. So it has all of the things we're looking for and now it is located inside of our component state, which means we can now pass it to other components.

And that's what we're gonna do in the next guide.

Resources

• Source Code