- Read Tutorial
- Watch Guide Video
So let's take a quick look at the finished application. I don't like doing this all the time because in a normal scenario you're not gonna have a finished application to look at, but you might have designs. So we're gonna treat this like a set of designs that you are going to work with so that you know the data that we need to bring in directly onto the homepage here.
So here I have the finished application, and you can see what it's gonna look like. We have each one of these portfolio item records, as I hover over then it shows the description.
So you can see here that we're gonna have a background image, we're gonna have a logo, then we're going to have the description, so this gives us some help on knowing what we're going to have to bring in. So now that we know that let's actually add some notes to our application. And the reason why I'm doing this, instead of just going and starting to build it in, is because I wanna walk through exactly the same process that I follow when I'm building out my own applications.
So let's go and let's start writing this down with some notes. So right here I'm just gonna add a comment right inside of the function, and so I'll say Data that we'll need and then let's start a list here. So the very first thing that we need is we're gonna need that background image, then we're also going to need the logo, and then we're going to need, let's see what else, we need the description, and then we need the id because that's what we're gonna be using for the slug. So these are the four items that we'll need.
Now these are helpful, these are kind of our high-level notes, but now we need to know what the data actually looks like. So let's now use the debugger like we've already walked through. So I'm gonna say debugger right here, and let's see what kind of data we have access to and get the exact names.
So switching back to the application I'm going to hit command option j, let's hit refresh, and now the debugger has paused the execution. So if I hit console here, I know I have access to item, we've walked through that before. So what I wanna do is I wanna say Object.keys, and this is something not in React, this is something specific to JavaScript, whenever you have an object, if you just wanna get the keys, you can call Object, and make sure it's capitalized, .keys, and then pass in whatever that object is and then from there it's gonna return only the keys.
This is something that I like to do because it makes it a little bit easier to just grab this data as opposed to having to get the data in its normal format with all of the values also associated with it. So I'm gonna paste this in as a comment, so these are all of our items. So our id is also id, so let me just add that. So that's the column name, and then we don't even need the name. We do need the description, that one is also called description.
So far nice and easy. The url, we do not need that one. We also do not need the category yet. We may use the category later for our filter, but we can always add that in later. For right now we just wanna pull in what is absolutely necessary.
Now, one other item, this position, we will be using that later because we wanna be able to control the order of our portfolio items. So if, in other words, later on you're gonna see if Crondose right here has a position of one it should be first, and whatever has number 12 should be listed in the last position.
But we're gonna worry about that later, so we don't need position. And so thumb_image_url, that is what we want for our background, so this is where it's helpful to pull in the data like this. So I'm going to say that is thumb_image_url, and we don't need anything else. So this is all of the data that we are going to use.
I'm going to get rid of the debugger, we used it for exactly what we needed it for. And in the next guide we're gonna see how we can translate this data and pass it directly into our portfolio item and we're also going to use some best practices to wrap all of this data up inside of our props object.