We are going to be able to take our state, we're going to update it with our live API data, and then we're gonna render it on the screen, so this one should definitely be a fun one. Right now, we still have our hard-coded values coming in, so the very first thing I'm gonna do is I'm going to open up Visual Studio Code, and let's clear out those hard-coded items.

So each of those data points, I'm going to get rid of, and so the data's initial state is going to start off as an empty array, and then when the API call comes in, it is going to update that state. So, let's also remove the this bind call, and the reason why we're gonna be able to do this, is because we're no longer gonna be calling this from the render function, but instead, we are going to use one of the React lifecycle hooks.

So instead of having getPortfolioItems inside of render, I'm going to come up above the render function and let's use the componentDidMount lifecycle hook and then inside of here, I'm gonna paste in this this.getPortfolioItems function.

So after the component has mounted, the API call is then going to occur, it's gonna to go out and get that data, and what's the next step? Well, we want it to update state, 'cause remember that our state is what holds the data, and then the data is going to then be extrapolated so we can grab the title, the URL, the slug, all of those kinds of things.

So now, inside of our getPortfolioItems function, we need to do a little update here. So now, and I'm gonna keep this console.log statement here, 'cause I'm gonna show you the data once again here in a moment, and so what we need to do here is to say that I want to this.setState, 'cause we are going to be updating the states value, and inside of this, I'm going to say data, and then, remember that we're getting an array.

So I can simply pipe in the data, we're getting response.data, 'cause remember, when we clicked on the console.log statement, we had to first click on the response, which was an object, and then data, which was an object, and then that gave us the portfolio_items, and it's very important you spell it out exactly like this. And after this is done, I'm gonna show you how this works and how you'd be able to do this without following along, if you just were given an API and you printed it out to the console, I'll show you how you'd be able to read this so you'd know what to place inside of this setState call.

So now I'm gonna hit save, and nothing is going to show up for the title yet, because one thing I'm gonna show you in the console log statement, is it's not actually called title, it's called Name in the API, and in the documentation, so if you come up here, you'll see up here at the header, this has the actual data points that are coming in.

So we have an ID, Name, Description, URL, Category, Position, Thumb Image, and each one of these image items. So what that tells me, is we're going to have to be able to rename those when we're creating our portfolio item component, and so let's see exactly how you'd be able to know what data points to bring into setState.

So you see we have our response data right here, let's open this up. Now the response is this entire object, so that's the first item we need to call, is response. And the reason why it's called response is because we told the Axios call that that was what we wanted to call it.

Now, if you wanted to rename this, so if you wanted to say something like res, which you'll see that quite a bit in quite a few tutorials, then you would have to rename each one of these items to res, and then it would still work.

So if you come here, let's hit refresh one more time, you can see that this is still working. It's still bringing in the data, and so I just wanted to point out that response isn't some kind of special keyword or anything, it could be any name that you want. I personally like naming it response, because it's nice and clear on what it's doing.

So now that we have that, how would we know the next item to call? Well, if you come up, you can see that response is an object, and just like every other JavaScript object, it has keys and values. So we have this data key, so that's how we know that the very next item is gonna be named data. And so I can say response.data, and then if I open up data, then you can see we have this name of portfolio_items, and that is a type of array, which means I know that I can store it in the state as an array.

So that is how you can traverse through a API response to see exactly what that name should be when you are setting the state, so that is exactly what we're doing right there.

Now let's move down, and so, you can see with our portfolioItems function here, this is not giving us exactly what we need, and the reason is because, remember we named the prop title, this is one of the cool things about React. We can keep the prop name of title, that's not a problem, all we have to do is come and change what we're calling on the item.

I'm gonna remove the console.log statement here with the response just so it's nice and clear what data we're getting, and once again, this is the process that I would personally follow whenever I'm building out a React or even a Vue application, and I'm working with the API, this is exactly what I'm doing. I am printing out the values, I'm reading them in, so I know exactly what to call.

So in this map statement I can place another console.log, and so here I can say this is my item data, and then I can just print out the item. So now, let's hit Save, and come back here. I'm gonna hit Refresh one more time, just so we can see this. And also, you may notice this big red warning, we're gonna fix that in one of the next guides, so for right now don't worry about it.

And you can see that we have all of these item data points printing it out, so that's perfect. This is what we have access to, and this is the exact data that we're passing into our PortfolioItem component. So if I open any of these up, you can see the type of data points I have access to. I have access to a name, I have access to description, category, position, URL, all kinds of things like that. So that means that I know exactly what to call here.

So here I can say, item, and instead of title, I can say .name, and then instead of hard-coding this Google URL, I can say item.url, and then for the slug, we don't have a slug data point, so I'm gonna say item.id. So now, let me clear out this console.log statement, hit save, and if I close this off, now you can see we're getting real data.

Each one of these items is the data coming in from the API, we're pulling it in, we're setting it into the application state, and then from there, we're rendering it out. Each one of these titles, as you can see, matches up exactly with what you have added inside of the database, so this is really cool. We're no longer hard-coding values, we're now bringing them in so that we can render them directly on the page.

So great job, if you went through that, you now know how to connect to an API in React and then show the data directly on the website.

Resources

• Source Code