00:00 OK, so we're going to get to one of the more tricky things that doesn't feel like it should be tricky. But and honestly, this is the leakiest abstraction of React is rendering arrays. So why does this have to even have an exercise? Let's talk about it.

00:16 So here is some UI. We've got a UL with one, two, three right there. That's all good. And then we want to make this more dynamic or reduce the amount of duplication, whatever. So we're going to have one, two, three in a list. And then we'll say, here's our UI.

00:33 And this is a UL with an interpolated mapping of all those items to their respective elements. So functionally, these will render the same HTML ultimately.

00:47 But in this case, you're actually going to get a warning in the console saying that you're required to have a key prop on this ally. And that might confuse you a little bit. Let's take a look at refactoring of this just to make it more clear.

01:01 So here we got our list. We have our list.map. We're going to turn these strings into React elements. So here's each list item gets its own ally. So we're just interpolating an array of items into this UL. So that is the thing that's going to trigger the warning. Now, why does this happen?

01:20 Well, the thing is that if we were in a situation where we're updating this over time, then we can run into a problem where React isn't sure what triggered the change that's happening.

01:34 I'll give you an example. Let's say that this is like a dynamic thing that's happening as we're running the application. I'm going to code the changes, but imagine that this is changes that are actually happening to the list dynamically.

01:50 So let's say we're going to change the order of these. And so now it goes 2, 1, 3. So at this point, React, it's looking at what it had before and it's looking at the changes that you're making and it's trying to determine how it should change the DOM, what changes it should make.

02:08 So for us, we just moved 2 over to 1 and swapped their places. And so what should happen is we should take the DOM node that was set for 2 and move it to be above the DOM node that was set for 1

02:22 and move that DOM node, you know, just basically move the position of those ally elements, right? That would be the most sensible thing to do. But here's another way that we could get to this final form.

02:34 What if instead we deleted this altogether, we changed this and then we added a brand new thing that just happened to have the same thing? Well, in that case, you're going to delete the ally and then you're going to create a new one and have the text content be 2.

02:51 Or what if instead we just change the text content 2 and this to 1? Now what React would do is it would say, OK, I'll keep the allies where they are, but I'm going to change the text content of each one of these. So there's just like so many ways that we could have gotten to this place.

03:09 Or maybe we blew away the list entirely and we made a totally new one and the orders are different. So now, like all of the allies should be deleted. We make new ones.

03:19 There's just like so many different ways that the React elements that we had before and the React elements we have now, so many different ways that those could have changed. And React just needs a little bit of help knowing what you did when it comes to rendering a list like this.

03:37 If you're not rendering using an array, if you're just hard coding it like this, then React can track each one of these React elements and be like, OK, I need to remove that one. I need to add that one. I know exactly which which is which, where they are and all that stuff. Then React knows that you can't dynamically change this in a way that it can't track.

03:57 But when it's an array of elements, it just there's no all bets are off. And so the solution is actually really, really easy, at least. And the solution is to add a key prop. Your key prop needs to be something that uniquely identifies the data that it's associated to.

04:15 And so typically your data is going to have an ID and that would be the best thing to use. But in our case, we don't have an ID, so we could probably just use the text. But there are implications of the different keys that you use.

04:30 The other cool thing is that this key prop isn't just about sorting and managing arrays either. There's also just a mechanism for remove this this component and make a new version of it for resetting stuff.

04:44 We're going to explore that in this exercise as well. So we're going to get a lot of practice and fun with this. I'll save this for when I'm introducing the first exercise, because it's kind of funny how this all plays out when you get it wrong. Maybe it's not funny if you're like losing money on your app because you got it wrong.

05:03 But you typically are not going to get this wrong. You've got linting plugins that will help you. And of course, React is going to give you the warning in the console. Again, this is probably the most leaky part of the React abstraction that you have to do this.

05:17 But I think it's kind of in favor with the idea that React doesn't want to own everything about how you create React elements. And it wants to kind of be in the background and give you a lot more control over things. It does mean that we have this tradeoff, though. So tradeoffs, they're everywhere. All right. We'll see you in the exercise.