The main reason is because these warnings are pretty big and they're starting to get in the way of our debugging and our console log process. So I was gonna wait 'til a little bit later in the course to take care of them, but let's do it now.

This is actually the second time I am recording this specific guide. The first time, the mic was unplugged so I was talking to myself for the whole time so that was fun, anyway, so now I am going to do it. I confirmed that the microphone is plugged in, so let's take care of this.

I'm going to first try to address the issue because I know what the problem is, but imagine that you're building this application out yourself and you get this big giant warning. Let's first walk through how you can find where to start looking for fixing the issue. So if I hit refresh here, let's look at the warning here, it says each child in an array or iterator should have a unique key prop.

Okay, so we've taken care of this before, we took care of this on the homepage. And so you know what a key prop is, you know that React uses it in order to keep track of elements in an array. Because if you take a big collection of items, it could be one item in an array or it could be a thousand, React needs the ability to keep track of that in memory.

So that's what the key prop allows it to do. So let's see where we can find this because I could simply point you to exactly where in the code, go out to key prop and take it from there, but that's only gonna help you take care of it for this application. The most important thing is so that you know when this happens in your own applications how to address it.

So let's walk through this, it says check the render method of App. Okay, so right away, we know to look in the App class, and so it says look in that for more information, and even specifically, it says in Route. Okay, so that gives us a little bit of a clue.

Now if we're to go into the app component, so I'll open up app right here and we know it's in authorizedPages 'cause we already talked about this, but I'd first look through the render method. So I'd look through here and I'd see is there any spot where a route is in a collection or anywhere where it's in an array? Now we don't have that anywhere except right here in authorizedPages.

So we would go up and we'd see that even though the Route for portfolio-manager is a single item, it's a single item in an array, and React doesn't care if there's one item or a thousand, it needs a key prop. So all we have to do to fix that warning is to, inside of the Route, say key equals, and we don't have anything terribly unique here so we could put anything we want.

You could technically just say one, that doesn't really represent what it is though so I'm gonna put the Route itself. So I'll say portfolio-manager, hit save, and now we have the key prop and that warning should go away. Let's test it out, I'm gonna clear this out and hit refresh. And it's gone, that warning is no longer there. Now you notice when the sidebar list loaded, another warning popped up.

So we had two key errors or two key warnings. So let's debug this one. If you come up here and you see this red box, it says warning, same exact one, the each child in an array needs a unique key prop. So here it tells us check the render method of PortfolioSidebarList.

So that is the very first spot that we should go and check out. So we're gonna open up that component of portfolio-sidebar-list and let's see, there you go, portfolio-sidebar-list. And inside of here, we don't have technically a render component but we are returning items, we're finally returning this portfolio list.

But before that, that's really made up of a collection. So anytime you're trying to debug a key prop issue, it's always gonna be in a collection. So we have this map iterator here and so where do we need to place the key? We have to place the key in the wrapper element. So in this case, we have this wrapper div it has a className of portfolio-item-thumb.

And so in order to fix that, we could say key equals, and then we have to give it a unique value so we can't say portfolio-item-thumb because then we would be giving an identical key value to each one of these items so that will not work, so what we need to do is give something unique.

Well, if you look through that data object, there's one value that is always gonna be unique and it's the database id. So it is exactly what we're printing out right here, that is gonna be unique across all of the portfolio items. So I can say key, and then inside of curly brackets say portfolioItem.id, hit save.

Now, if we come back and clear the console, we will see that we're now getting no warnings, everything is working perfectly, so now we have a much cleaner looking console.

One side note before we finish out this guide and continue building out the form, I do wanna mention that I have seen a few tutorials that use the id of the array. So as you're mapping over, you technically have access to grab not the id like we have right here but actually the index.

So you'll see something like this where it'll say portfolioItem and then comma idx because you technically do have access to the index value of map. So it's behind the scenes, it's hidden, but it does give you access to that. And then instead of the portfolioItem.id, they would use the array index.

In the React community, that is something that is frowned upon and it's considered an anti-pattern, it's something that you shouldn't do. And the main reason for that is because this index belongs to the array but it doesn't belong to this object.

So let's walk through an example of how this could be a problem. Say that you're building a drag and drop interface. So you wanted to be able to click on one of these portfolio items, drag it to a different spot, and then that would update the position or the order value.

Well, if you did that and you were using the index, so you're using the array index and you try to do an update, then you could end up in a situation where you have the index that is duplicated because if you hold onto that index, then you're actually going to have, say, one item with a key of five 'cause you moved it into the fifth position, and then you'd still have another one with a key of five, and then you're gonna end up with a problem 'cause you'll have duplicate keys and it gets even trickier if you're trying to pass any of those values into the actual API call.

That may sound confusing, that may sound like an edge case and it is. You won't run into that issue a lot, but because it's something that could lead to occasional bugs, it is frowned upon. So what the rule of thumb is, is this key should always be something that belongs to that object, there should be something in the object that makes it unique.

And thankfully, whenever you're contacting outside APIs, they're typically going to send some form of a unique identifier and that's exactly what you can use right here. So I'm gonna revert back to using the id like we should and so let's hit save, and just verify everything is working, I'll do a hard refresh, and we're getting no warnings.

So now with all of that in place, we have a clean console. And in the next guide, we are going to build out our portfolio form so that it starts creating records in the database.

Resources

• Source Code