- Read Tutorial
- Watch Guide Video
This is going to give us a little bit of guidance into how React works behind the scenes. So I think it's worth it to take a guide dedicated to seeing what this key means. So if you hit Refresh and then open up your console, you should see a warning right here.
Now, this is not an error, but it's a warning directly from React, and it says, Warning: Each child in an array or iterator should have a unique key prop. So what this means is that behind the scenes, React, when it performs a task such as rendering out a list of items onto the screen, it does it a little bit differently than normal HTML. So normal HTML, we're using what is called the DOM, the Document Object Model.
What React does for us is it creates what is called the Virtual DOM. And so instead of us having true divs and p tags and h1 tags and those kinds of things, what React does is it mimics that, and we haven't talked a lot about that because I don't really want that getting in the way of you learning how React works, but I do want to say it because this is what is going to explain why we need to have this key prop.
So part of the reason why React is so popular is because it is so good when it comes to performance. So for performance reasons, what React will do is, say that we make a change to one of these items. So we make a change to, say, this Test Portfolio Item right here.
What React will do is instead of re-rendering the entire page, the way it would work in a more traditional application, the way that we used to make applications, what it will do is it will only target and make a change to that one component, so we'll only make a change right here to this element that we have selected, and so that makes React applications if you build them right, much better in terms of performance than other types of applications.
So you may ask, okay, that's nice and that's all well and good, what does that have to do with having this key prop? Well, the key prop is what React uses to keep track of elements. So, in other words, if we look at the code, we can see this PortfolioItem right here, This is being auto-generated. So we might have one, we might have twenty of these that are created, and React needs to have a way of telling the difference between one versus the other.
So that's what the key prop does, is it gives us the ability of keeping track of any type of component that is auto-generated. So this is a good rule of thumb; any time you are iterating through a list such as an array of items, you are most likely going to have to pass a key prop so that React can keep track of knowing which, in this case, in which PortfolioItem, we're working with, and because it's a prop, we can treat it like any other prop.
So if you come here to PortfolioItem, I'm going to say key={, and then I'm gonna say item. Now, this is important right here. Whenever you're passing in a key, you may notice, and this'll save you a lot of heartache and debugging issues later on, if you're using a key prop, make sure that it is unique, just like it says right here.
So what that means is when we're passing in a data element for the key, we have to make sure that it is completely unique, that means none of the other portfolio items can use this. So for example, using the name here would be a bad idea because what if we ever have two items that have the same name? We probably won't, but just to be on the safe side, you don't wanna use a key that could ever potentially be identical.
Using the category would also be a bad idea because we're going to have many different elements that have the same category. One thing that we will always know will be unique is the ID though, so if I say item.id, which is also what we're using for the slug here, and hit save, and this is re-adjusting 'cause of the prettier extension that I have in vs code.
Now, let's come and clear this and hit refresh, and now let's see what happens. Okay, now you can see that that warning is gone, so we have effectively fixed this, and now we have the ability, or I should say, React has the ability to keep track of each one of these items.
So if I come and I click and inspect one of these elements right here, if you look at the code itself, I'm zoomed in here so it's a little harder to see, but you can see that we have this portfolio/93 so we know 93 is the ID. And you may also notice here that this div doesn't actually have the key prop passed in. So this is not something that gets rendered in the HTML, this is something that is used only internally for how React works and how it keeps track of our dynamically generated components.
But good job if you went through that, you now know how and why you wanna use the key prop in React.