Now we're not gonna render it out on the screen quite yet, we're gonna do that in the next guide. For right now, I want to implement each one of the elements we need to contact the API to take that data in to store in our local component state.

So you've already done every one of these features already, the only thing you'd be missing is the actual endpoint for the API because that's gonna be specific per feature, but for right now, let's start. We know we're going to contact an outside API, so one of the first things that we have to do is import Axios, so I'm gonna say "import axios from Axios".

Now that we know that we can contact an API, we are also going to have to store our blog records inside of our local state, so we need to instantiate the state and give a base set of values, a base state. So I'm gonna say this inside of our constructor, say this.state =, and in the state object, I'm gonna call this.blogItems, and I'm gonna set it equal to an empty array whenever this component loads up, and then we are going to populate that array.

So that is our state, and now we need a function that is going to be able to retrieve those records, and we need to bind it to this because it needs to be able to populate our state, so I'm gonna say this. and I'm gonna call the function get blog items, and then we'll set it equal to this.blogItems.bind(this) like we've done before, and then I'm going to create this function.

So we're gonna give ourselves some room because we definitely have a little bit of code to write right here, so I'm going to create our getBlogItems function, it's not gonna take any arguments, and its gonna start by calling Axios, and this is going to be a get method, so I'm going to say axios.get, and inside of here, what I'm gonna do is pass in the URL endpoint, and this one is going to be https://, oh and it's not API, it's actually your subdomain, so it's whatever your subdomain is.

In my case, it's just Jordan, for you, it'd be whatever your subdomain is. If you need to reference that again, you can go to DevCamp Space, go into the portfolio, and then you see these API endpoints, you can see your subdomain right here, and I'll also be adding the blog endpoints, I just haven't done that quite yet.

So the subdomain is the start of it, and then .devcamp.space, and then from there, it's /portfolio/portfolio_blogs, and that's all we need to do for right now.

blog.js

getBlogItems() {
  axios.get("https://jordan.devcamp.space/portfolio/portfolio_blogs")
}

We're actually gonna add on a few more items later on, but for right now, that's all that we need to do, and I'm also going to pass in the with credentials flag, so add a comma right after the URL before the parentheses, and then inside of here, create an object and say withCredentials: true so that we can check to see if you are authorized or not.

So technically, this URL is publicly available because you shouldn't have a problem with other people accessing your blog, but this is going to check to see if you're logged in or not and will give you some extra permissions because of that, so I'm gonna hit save just so the prettier extension will format this for us.

Then I'm gonna get rid of the semicolon right here, and then I want to say when that promise resolves, so when we go out to the API, and we get our data back, then I want you to do this. And for right now, I'm just going to console log this out, so I'll say response with an arrow function, and I just want to see this data.

So I'll say response and response, and then I want to catch any errors, so catch the error, and inside of an arrow function here, I'll console log, and in a string as I usually do, just kind of my personal convention, I like to put the name of the function that is inside that makes it easier to debug later on, error and then actually give the error itself.

blog.js

getBlogItems() {
  axios
    .get("https://jordan.devcamp.space/portfolio/portfolio_blogs", {
      withCredentials: true
    })
    .then(response => {
      this.setState({
        console.log("response", response);
      });
    })
    .catch(error => {
      console.log("getBlogItems error", error);
    });
}

Okay, so this right here is good, but it's just a stand-alone function, we need to call this, so we need to tap into our lifecycle hooks, and we're gonna call this function. So down below, and we can put it above the render, I'm going to say componentWillMount, and inside of this function, call this.getBlogItems, and then we want to execute it, so we're going to add the parens at the end, hit save, and now we can test this out.

blog.js

    .catch(error => {
      console.log("getBlogItems error", error);
    });
}

componentWillMount() {
  this.getBlogItems();
}

render() {

So go into the browser, make sure you have your server running, and you can hit refresh, and it looks like we have an error, so let's see what that error is. I'm gonna scroll up to the top here, "Cannot read bind of undefined". Okay, maybe I have a little error with my code here.

So I have this.getBlogItems, oh, and that's the issue. Blog items, I called the actual state name, not the function name, which you may have seen, and so that one should be fixed now,

blog.js

  this.state = {
    blogItems: []
  };

  this.getBlogItems = this.getBlogItems.bind(this);
}

getBlogItems() {
  axios

and that also kind of explains a little bit on what process is occurring here, we can't call this .blogitems 'cause that is inside of State, it's encapsulated inside of State where we can call this .getBlogItems 'cause this is a function.

So let's now switch back to Chrome, and it looks like everything's working, let's hit refresh again and see if we get our data, and we do, we have our response data here, and if I open this up, I can see that there is a data attribute, and click on that, and here are our portfolio blogs,

so this is also going to tell us the way that we can reach in and grab this, we're gonna be able to call response.data.portfolioblogs, and that's how we're gonna be able to populate our state. So let's go in and do that, and then after that, I think that would be a good place to stop.

I'm going to get rid of this console log statement, and I'll say when the response comes back, I want to call this.setState, and inside of parens, and then an object, I want to grab our value of blog items, and I want to replace that with our response.data.portfolio_blogs, just like this.

.then(response => {
  this.setState({
    blogItems: response.data.portfolio_blogs
  });
})

hit save, and we'll test this out to see if it's populating our state. So you can hit refresh on the page here, and then we're not going to use the console for this, we'll go into the react dev tools, click on react, and now here, we can come and select our blog, so I'll click on the blog component itself.

Make sure that you don't go too deep, you actually have to select the blog component, and then from there on the right-hand side here, I'll go down to state, you can see we have our blog items, then is an array of items, which is what we're looking for, I'm gonna open this up, and you can see each one of these records. If I open up the first one, it says blog status published, it has the content, it has the image URL, and it has the title and ID, so this is everything we're looking for.

Now one question you might have is say that you put items in or you put a different number than 10, why do we all have an array of size 10? Well, that's because of how the API works, and it's necessary in order to implement pagination and infinite scrolling.

We didn't need this for our portfolio items because we never really plan on having so many portfolio items that we need to build infinite scrolling or pagination for that, but for blog items, you could very well end up with hundreds of these if you use this for your personal or technical blog, so we need to make sure that we don't ever get to a point where someone goes to the page and it takes a minute to load because it takes that long to pull and retrieve all of those records from the database, so that's a reason why there is a limit.

This is very common with APIs, it's very rare than an API simply sends you all of its data. It always is going to wrap it up, it's going to limit it, and then what you have to do is go and manually retrieve that data, or I should say we're gonna build functionality that's gonna do it for us, and it's gonna go and it's gonna say okay I want the next 10 and the next 10 and as you do that, the data will simply come, it'll hit our application, and then we can work with it.

So, that's why we have that number of records, but great job if you have that, we've now called the API for our portfolio blogs, we've retrieved them, and we have stored them in our local state. So the next step is to take all of that data and to render it onto the screen.

Resources

• Source code