- Read Tutorial
- Watch Guide Video
Feel free to use the exact same ones that I provided. And as you go throughout the Bootcamp then you're gonna be adding in your own portfolio items and you can simply click the little X here and that will remove the demo items that you have.
So now, if you've added all of those into the data manager, that means that you should now if you hit refresh, you should now have all of those data elements directly inside of your own application. And in the next few guides, what I wanna do is to talk about how you can manage your data.
This is something that I've noticed is very overlooked in many of the different tutorials and books that I've seen and it's something that you're gonna have to do on a regular basis. So I think it is worth spending a little bit of time in learning how you can access the data properly when it comes in from an API. So it's going to take us a few guides, but this is definitely worth it.
Because I can tell you as I'm building out my own react applications, these things that I'm gonna show you are the exact steps that I take whenever I'm communicating with an outside service. So let's start by using one of the most standard ways of doing it.
So right here you can see that we're passing in props and that's how we have access to these names and urls and those kinds of elements, but we also need to know all of the data that's available. Now sometimes when you're working on an application, you will have something nice like this where you have access to see all of the backend data that you're gonna have access to and you can go and click on something like the endpoint and you can see all of these items.
However, that is actually not going to be the case all the time. And there's going to be many situations where you need to build your own ways of looking at this data. So we're going to pretend like we don't have these nice links that we can go to, and we need to see all of the data points that we have access to.
So I need to know that I have a name, I need to know that the other item for our summary is called a description and that I have a url, and category, and position, and also if one of the next steps is going to take the images and putting those on the homepage; I need to know what those images are called. So let's see how we can do that, 'cause right now I kind of gave you a hint earlier on some of the data elements such as the name and the url. But let's imagine that we don't even know any of that, we just need to see what we have access to.
The very first thing that I'll do is I'm simply gonna go in and I'm going to console.log the data, so inside of our portfolio items function here, inside of our map function, I can just say console.log and then pass in a couple of arguments.
So I could say this is gonna be a portfolio item and then this is called item. Now, this is called item because that is the name of the variable we're passing to map. So now if I hit save and switch over into Google Chrome here and I'm gonna open up the JavaScript console and you can do that by typing command option J once again or you can just right click on the browser, click inspect, and then switch over to the console. And you can see right here that we have access to all of our portfolio items.
So this is kind of the most introductory way, but it's also nice and quick for being able to access and get some visibility into our data. So here with that first one, I'm going to expand the object and you can see I have the access to see okay this is the banner_image_url and that is going to be one of the images that we slide into our react code, I can see what the category is, I can see that we have something that says column_names_merged_with_images.
That's more of metadata, we're not going to actually use that, but it's nice to see that it's there. Then we're gonna have the description, an id, a logo_url, name, position, thumb_image_url, and then the actual URL. So I could go through and access each one of these and see what type of data I can work with. So now that I have that I could go and I could switch into the code and I could start passing in more data directly into our portfolio item.
So I can pass in the image and I'll now know exactly what that image is called. So that is going to use the console.log process for being able to access the data and in the next guide, we're gonna walk through how we can use the debugger in order to have more control over the data that we're looking at.