Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Key Props" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

React manages list-based data through a key property. The key property is the unique identifier for an item so React is able to track the item within the interface. Brian demonstrates how to add a key property for each show and uses the show’s imdbID property as the key.

Get Unlimited Access Now

Transcript from the "Key Props" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: So let's get rid of the key thing real quick. Cause we all know that's really annoying. So come in here to show card. Show card. Not show card, search, search.jsx. And we have to give it a key.
>> Brian: And we're gonna do show.imdbid. Now the reason why we're doing this is react is actually pretty smart about the way it does updates to the dom.

[00:00:42] It has like a whole virtual dom diffing system underneath the hood like you don't really have to care what the virtual dom is because you never really have to interact with it. You can basically interact with react as if it was a normal dom and just not care what's actually going underneath the black box.

[00:00:57] But key is basically saying I have the show and in the future if I decided to rearrange all my shows, please reuse the same dom elements, right? So if I have Daredevil here, right. And I rearrange House of Cards to swap places with Daredevil like please reuse them, right?

[00:01:16] And so it will be smart enough to take one out and put it in the other but the only way that it knows how to do that is if you give it a key that it can key off of, right? So in this particular case if you look at our dated R.J. sun.

[00:01:28] They all have these IMDB IDs right here and these are guaranteed unique to those different shows right. So now that it has this unique ID and I could swap these two and it's smart enough to know that okay I can keep these same dom things. I don't have to create, destroy and be less efficient, right?

[00:01:46] So basically giving react to hint to be able to reorder these things without destroying things unnecessarily. And so if you go back here to search, I'll save that. I'm still getting my errors. I'll fix those in a sec too. But if I look down here right now I'm seeing this prop error but if I refresh it'll be gone.

[00:02:11] That's what that error means. It says hey you're doing a repeat on something and I need to know which one is which. It's basically the gist of it. Question about that? [BLANK-AUDIO] Make some sense hopefully and I know for a fact Angular has the same concept in there.

[00:02:31] I think they're like track by or group by. No, not group by I think it's track by.