1

00:00:00,950  -->  00:00:04,050
In the last section we got our list of videos to render successfully.

2

00:00:04,200  -->  00:00:10,320
But we did get a big warning here in the Council that says each child should have each child in NRA

3

00:00:10,380  -->  00:00:12,810
should have a unique key Propp.

4

00:00:12,860  -->  00:00:14,330
All right so what's going on here.

5

00:00:14,580  -->  00:00:19,800
So as I said earlier re-act is very clever about rendering lists but sometimes it's a little bit too

6

00:00:19,800  -->  00:00:20,210
clever.

7

00:00:20,220  -->  00:00:26,880
You might say whenever we render an array of items of the same type react correctly assumes that we're

8

00:00:27,210  -->  00:00:33,600
building a list you know like obviously it's an array it's probably a list re-act has a bunch of logic

9

00:00:33,600  -->  00:00:39,150
built into it to optimize the process of rendering a list.

10

00:00:39,150  -->  00:00:41,770
Imagine for a second that you had a big stack of note cards.

11

00:00:41,790  -->  00:00:42,090
Right.

12

00:00:42,090  -->  00:00:48,570
Dispells stack and you have some very important information updated on or very important information

13

00:00:48,570  -->  00:00:50,430
printed on each of them.

14

00:00:50,430  -->  00:00:56,610
Now picture that every 30 seconds someone came to you and told you that a very particular card in the

15

00:00:56,610  -->  00:00:59,940
middle of the deck needed to have its information updated.

16

00:01:00,150  -->  00:01:03,150
But they didn't know exactly which card in the stack it was right.

17

00:01:03,150  -->  00:01:07,770
They just said you know some card in here it needs to be updated.

18

00:01:07,770  -->  00:01:09,800
I don't know which one but you really got to do it.

19

00:01:09,810  -->  00:01:11,250
You have to do it.

20

00:01:11,760  -->  00:01:18,030
Your only option for updating that your list of index cards have to be to throw away the entire stack

21

00:01:18,390  -->  00:01:20,510
and recreate all of the index cards.

22

00:01:20,700  -->  00:01:26,340
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

00:01:26,340  -->  00:01:28,310
just going to have to recreate the entire list.

24

00:01:28,320  -->  00:01:31,130
I have to remake every index card.

25

00:01:31,890  -->  00:01:37,590
If you had an ID for each card however and the person telling you to update one said hey you know what

26

00:01:37,620  -->  00:01:40,140
I need to update the card with 85.

27

00:01:40,140  -->  00:01:42,030
The process would be much faster.

28

00:01:42,330  -->  00:01:47,430
You could just pull out the index card with 85 update some information and then shuffle it back into

29

00:01:47,430  -->  00:01:48,510
the deck.

30

00:01:48,510  -->  00:01:54,030
So that's really what's happening under the hood with re-acclimate trying to render a list.

31

00:01:54,210  -->  00:01:59,430
It builds a list if it has an ID for a particular element and that element changes.

32

00:01:59,460  -->  00:02:02,850
It knows which element it needs to go grab and update.

33

00:02:02,850  -->  00:02:09,600
Otherwise it's going to throw them all away and rerun them all having a key to a list is really straight

34

00:02:09,650  -->  00:02:10,290
forward.

35

00:02:10,300  -->  00:02:17,190
Thankfully it just needs to be a consistent and unique piece of information unique to that particular

36

00:02:17,190  -->  00:02:18,630
record.

37

00:02:18,630  -->  00:02:23,720
A common strategy when rendering a list of data is to use the ID for that piece of data.

38

00:02:24,090  -->  00:02:25,910
So in our case we have a video here.

39

00:02:25,920  -->  00:02:32,100
You might be thinking and we don't really have any like unique Vidia or unique data about each record

40

00:02:32,110  -->  00:02:32,530
.

41

00:02:32,970  -->  00:02:38,960
Well you know we kind of do in the console here are going to pull up the API response from YouTube

42

00:02:43,100  -->  00:02:44,490
in their response.

43

00:02:44,580  -->  00:02:50,960
Here you'll see that the items array which is our actual list of videos each video has an e-tag which

44

00:02:50,960  -->  00:02:52,420
is a unique identifier.

45

00:02:52,440  -->  00:02:55,610
You can see that it's a long string of characters.

46

00:02:55,710  -->  00:03:02,010
So if we use this e-tag for each video as our key that would be a sufficiently unique key for each element

47

00:03:02,130  -->  00:03:04,920
in our in our video items array.

48

00:03:05,220  -->  00:03:13,720
So to add a key we just define it as a property so will say key equals video dot e-tag.

49

00:03:14,070  -->  00:03:20,040
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

00:03:20,100  -->  00:03:22,740
a number or anything.

51

00:03:23,130  -->  00:03:25,710
You know very specific it just needs to be very consistent.

52

00:03:25,710  -->  00:03:27,060
You know one per record.

53

00:03:27,150  -->  00:03:30,480
So each video always has the same e-tag.

54

00:03:30,690  -->  00:03:36,360
And so even if we re render this component it will have the same e-tag again it will have the same key

55

00:03:36,360  -->  00:03:40,580
again which is the key that was upon our.

56

00:03:40,720  -->  00:03:41,640
So I'm going to say this.

57

00:03:41,640  -->  00:03:47,340
Let's go ahead and refresh the page got our consul here and you'll notice the error went away because

58

00:03:47,340  -->  00:03:50,970
now we're providing a key for each element in our list.

59

00:03:50,970  -->  00:03:52,530
Fantastic.

60

00:03:52,530  -->  00:03:53,430
This looks pretty good.

61

00:03:53,520  -->  00:03:54,650
I'll see you in the next section.