In the last section we got our list of videos to render successfully. 2
But we did get a big warning here in the Council that says each child should have each child in NRA 3
should have a unique key Propp. 4
All right so what's going on here. 5
So as I said earlier re-act is very clever about rendering lists but sometimes it's a little bit too 6
clever. 7
You might say whenever we render an array of items of the same type react correctly assumes that we're 8
building a list you know like obviously it's an array it's probably a list re-act has a bunch of logic 9
built into it to optimize the process of rendering a list. 10
Imagine for a second that you had a big stack of note cards. 11
Right. 12
Dispells stack and you have some very important information updated on or very important information 13
printed on each of them. 14
Now picture that every 30 seconds someone came to you and told you that a very particular card in the 15
middle of the deck needed to have its information updated. 16
But they didn't know exactly which card in the stack it was right. 17
They just said you know some card in here it needs to be updated. 18
I don't know which one but you really got to do it. 19
You have to do it. 20
Your only option for updating that your list of index cards have to be to throw away the entire stack 21
and recreate all of the index cards. 22
If you don't know which one to update you have to say OK you know I'll update it but all I'm really 23
just going to have to recreate the entire list. 24
I have to remake every index card. 25
If you had an ID for each card however and the person telling you to update one said hey you know what 26
I need to update the card with 85. 27
The process would be much faster. 28
You could just pull out the index card with 85 update some information and then shuffle it back into 29
the deck. 30
So that's really what's happening under the hood with re-acclimate trying to render a list. 31
It builds a list if it has an ID for a particular element and that element changes. 32
It knows which element it needs to go grab and update. 33
Otherwise it's going to throw them all away and rerun them all having a key to a list is really straight 34
forward. 35
Thankfully it just needs to be a consistent and unique piece of information unique to that particular 36
record. 37
A common strategy when rendering a list of data is to use the ID for that piece of data. 38
So in our case we have a video here. 39
You might be thinking and we don't really have any like unique Vidia or unique data about each record 40
. 41
Well you know we kind of do in the console here are going to pull up the API response from YouTube 42
in their response. 43
Here you'll see that the items array which is our actual list of videos each video has an e-tag which 44
is a unique identifier. 45
You can see that it's a long string of characters. 46
So if we use this e-tag for each video as our key that would be a sufficiently unique key for each element 47
in our in our video items array. 48
So to add a key we just define it as a property so will say key equals video dot e-tag. 49
So again the key really you know it doesn't need to be any special key or doesn't need to be you know 50
a number or anything. 51
You know very specific it just needs to be very consistent. 52
You know one per record. 53
So each video always has the same e-tag. 54
And so even if we re render this component it will have the same e-tag again it will have the same key 55
again which is the key that was upon our. 56
So I'm going to say this. 57
Let's go ahead and refresh the page got our consul here and you'll notice the error went away because 58
now we're providing a key for each element in our list. 59
Fantastic. 60
This looks pretty good. 61
I'll see you in the next section.