Now, to reiterate, the debugger is not something specific to React, it is built directly into JavaScript, so you could use it on any type of application that uses JavaScript. And so it makes a really nice way of debugging your application and being able to get some visibility into the data that you're working with.

Now, I also mentioned that this does not allow you to view items such as your application or component state and that we're going to integrate the React Developer Tools in order to do that. And so the very first thing I wanna do is make sure you remove the debugger statement here, and hit save, and then go back and refresh your application, and everything should now load properly.

Now, I already have this installed, but if you simply Google React Developer Tools, and I'm also going to give you the Chrome extension, then you can simply click on Add This Extension to Your Browser after it's processed. You may need to restart, and then you're gonna have full access to use it directly in your application.

Now, I would definitely recommend for you to go through and see some of the screenshots, and see some of the full capabilities. We're gonna be using it quite a bit throughout this course, so I would recommend that you pause the video now and go and install that, and then I'm gonna walk through some of the key ways that we can use it after that.

So now, if you have that installed, then I want you to go to the application, make sure it's running, and then, depending on how zoomed in you may have your application, you may see React right here. If not, if you have it highly zoomed in as I have it for this course, then you can click on these arrows here, and now you should have a dropdown that says React.

And so what this does is it gives you the ability to get some better visibility that is React-specific. So this means that you can view your application's Props, its state, you can view child components, parent components, you can see the entire component tree, and you can inspect all of your data. So this is something that is very helpful as you start to build out your React application.

So it has a little inspector right here,

there are a couple of ways that you can get access to the data. So I want to go and see what each one of these items look like, kind of like we did with our debugger, and with our console log statements, just so you can see all of the various ways you can access your data.

There are a couple of ways of doing that, you could come to the tree here, and I'm gonna give us a little bit more room, and so I could come here, click this arrow, and I could keep on moving down, but that could take a long time. You can see that we have our Provider component, our BrowserRouter, our Router, then we have our main App component, and we could keep on going down. I rarely do that, because the bigger your application gets, it starts to become very cumbersome to do it that way.

So instead, what I do is I click on this little inspector here, and I can inspect any of these elements. So let's just come here, and pull in this entire div, which is our PortfolioContainer component, and I'm just gonna click on it, and now, on the right-hand side here, you can see what we have access to, and now we get access to our state.

So you can even manipulate some of this data, which is really cool. So if I click on isLoading, notice that it removes everything from the page and puts Loading there. If I click it again, it's false, and now you can see all the data is loaded up there.

We have access to our pageTitle, you can change this. So you could just call it anything that you want, I'm not gonna change anything right now, 'cause I like it like that, but if you stretch this a little further, now you can see all of your data directly in your state.

So I want you, 'cause this is important to understand, understand the difference between what we're doing here. When we were console logging, or when we were using the debugger inside of our map here, what we were doing is we were actually getting access directly into the item object. And so this would be the same as taking this item object and passing it as Props or doing anything like that. But what we're doing here is we're getting visibility directly into the React component.

So here, we are not looking to go into that map iterator or anything like that, that's too low-level. Here, we're getting access directly to our state. So I'm gonna click on this array here, click on this arrow, and now you can see that I have access to each one of these items. So I can click on zero here, and you can see I have access to the full image.

If I scroll down, I have access to the category, to the description, to the id, and I can see all of the data that is directly built into state. So this is a great way of being able to see all of the data that that specific component has access to.

Another thing that is very helpful is, we have our PortfolioContainer here, now if I wanna come down and, let's say I wanna click on one of these other items. So right here, it says "Unknown", what I have access, here, too, is to be able to see all of my Props.

So here you can see we passed in the slug, the title, and the URL. We also have a key, so this is how React is able to reference the unique, specific component that it's working with, and being able to see all the Props I have access to is very helpful.

So hopefully this is giving you a little bit of a clearer picture of how you can work with data in React. So I know if you have never done this before, when you're performing a task such as mapping over, iterating over a collection, it might feel a little weird, and it might make you feel kind of unsure, on how you can pull that data in.

So, hopefully, through these three guides, you now can feel a little more confident in how you can get access to view that data, and then from there, you're really only one step away from being able to render that directly on the screen, and that's what we're gonna start doing in the next guide.

Resources

• React Developer Tools Extension