1
00:00:00,900 --> 00:00:03,600
In the last section we got our list of images to display.

2
00:00:03,660 --> 00:00:07,620
But if you look at your terminal or your counsel in the browser you might notice we got a little warning

3
00:00:07,620 --> 00:00:08,080
here.

4
00:00:08,290 --> 00:00:10,890
Now this is a warning not a error per se.

5
00:00:10,980 --> 00:00:13,140
So our application is going to work just fine.

6
00:00:13,290 --> 00:00:18,150
But re-act would really prefer if we did something a little bit differently inside of our image list

7
00:00:18,150 --> 00:00:23,170
file a look at the wording here says Each child should have a unique key prob..

8
00:00:23,400 --> 00:00:28,050
And then also tells us that the source of this warning is the image list component.

9
00:00:28,080 --> 00:00:32,460
In this section let's talk about what this key thing is and why we are supposed to use one or to find

10
00:00:32,460 --> 00:00:35,520
one whenever we are building a list of components.

11
00:00:35,520 --> 00:00:39,570
All right so quick example here let's forget about getting a list of images right now.

12
00:00:39,570 --> 00:00:44,520
Let's imagine that we instead have a list of to do items or things that we have to do throughout the

13
00:00:44,520 --> 00:00:45,390
day.

14
00:00:45,430 --> 00:00:51,240
So let's imagine that each to do looks like what you see right here it is a object with a I.D. and a

15
00:00:51,240 --> 00:00:51,970
task.

16
00:00:52,080 --> 00:00:58,480
So take out the trash wash the car and walk the cat walk the dog let's be a little bit better.

17
00:00:58,480 --> 00:00:59,340
There that's better.

18
00:00:59,580 --> 00:00:59,860
OK.

19
00:00:59,880 --> 00:01:04,800
So in theory we might want to show this list of to do to the user so we might want to render it as a

20
00:01:04,800 --> 00:01:12,450
list and say take out the trash wash the dog wash the car walk the dog inside of a collection of device.

21
00:01:12,570 --> 00:01:17,160
So let's now imagine that we've rendered this list right here and we've shown it in the dome and it's

22
00:01:17,160 --> 00:01:18,420
visible on the screen.

23
00:01:19,530 --> 00:01:24,720
And then maybe at some point in time our user comes along and decides that they need to add one more

24
00:01:24,810 --> 00:01:26,130
to do item.

25
00:01:26,130 --> 00:01:28,450
They want to put on a new to do here.

26
00:01:29,250 --> 00:01:31,550
And they want to have some new task for it.

27
00:01:31,860 --> 00:01:34,280
So we would be in this type of situation.

28
00:01:34,290 --> 00:01:40,010
We've now added on a new task of mow the lawn when we update our list of items right here.

29
00:01:40,010 --> 00:01:44,210
Let's imagine that we then tell react to read render our application.

30
00:01:44,210 --> 00:01:49,730
So in memory we're kind of behind the scenes reactant going to take this list of to do items that we

31
00:01:49,730 --> 00:01:56,450
have now rendered as GSX and it takes this list right here a div for each item and then it looks at

32
00:01:56,450 --> 00:02:04,050
what is currently present in the DOM know what re-act is going to try to do what it wants to do it wants

33
00:02:04,050 --> 00:02:09,900
to notice or wants to see that hey I've got a dish here that has to say take out the trash and it turns

34
00:02:09,900 --> 00:02:16,500
out there's already div inside the dam that says Take out the trash re-act wants to say oh this div

35
00:02:16,500 --> 00:02:17,750
is already in the dorm.

36
00:02:17,820 --> 00:02:22,820
I don't need to render it or I don't need to insert anything for that item it then will go onto the

37
00:02:22,820 --> 00:02:27,860
next item and it wants to say it wants to have the ability Oh wash the car well that div is already

38
00:02:27,860 --> 00:02:28,370
in the dorm.

39
00:02:28,400 --> 00:02:29,940
I don't need to render that.

40
00:02:29,990 --> 00:02:33,100
And then the same thing for Walk the dog as well.

41
00:02:33,150 --> 00:02:36,560
And so finally reacts would say OK let's see mow the lawn.

42
00:02:36,600 --> 00:02:41,700
Well I don't see that represented in the dome right now so I guess this is the one location where I

43
00:02:41,700 --> 00:02:46,110
actually do have to do an update and appends some new element to the door.

44
00:02:46,440 --> 00:02:51,500
Like I said that is what re-act wants to do in order to allow rock to actually do that.

45
00:02:51,540 --> 00:02:57,980
We have to add in this thing called a key prop to each element in the list of items that we are rendering.

46
00:02:58,000 --> 00:03:00,030
So let's take a look at what that would look like.

47
00:03:00,030 --> 00:03:05,730
All right so same list here but now you'll notice that every element has a key prop this key prop right

48
00:03:05,730 --> 00:03:10,460
here has reused the ID of each of these two items.

49
00:03:10,500 --> 00:03:12,300
We'll talk about why we did that in just a second.

50
00:03:12,300 --> 00:03:17,010
But right now let's kind of take a get a better look at what would happen when re-act tries to take

51
00:03:17,010 --> 00:03:19,320
this new list and stick it into the dump.

52
00:03:19,560 --> 00:03:23,610
It's now in this case re-act would say OK let's see div with Q1.

53
00:03:23,700 --> 00:03:27,150
Let's look at all the device here and try to find one with key one.

54
00:03:27,180 --> 00:03:28,830
Oh there it is.

55
00:03:28,850 --> 00:03:31,940
Reacts well then compare the contents right here with that.

56
00:03:31,950 --> 00:03:32,770
And I'll say OK.

57
00:03:32,790 --> 00:03:33,660
They are identical.

58
00:03:33,660 --> 00:03:34,680
Fantastic.

59
00:03:34,980 --> 00:03:39,930
Well then move onto div with Key to it look through the list find a do with Geetu and then do that same

60
00:03:39,930 --> 00:03:42,430
comparison and the same thing with Keith 3.

61
00:03:42,540 --> 00:03:46,370
And then it gets down to four and it says I see no element with key 4.

62
00:03:46,470 --> 00:03:49,210
Ok I guess I will put this into the door.

63
00:03:49,490 --> 00:03:51,210
So that's the purpose of the key.

64
00:03:51,240 --> 00:03:57,180
It is purely a performance consideration and it's going to help re-act render lists or updates to lists

65
00:03:57,360 --> 00:04:01,870
to be more precise more performant Lee than if you left off that key entirely.

66
00:04:01,890 --> 00:04:07,410
So it's in your best interest to make sure that you include a key on every element that you render as

67
00:04:07,410 --> 00:04:08,970
part of a list.

68
00:04:08,970 --> 00:04:10,080
That's the important part.

69
00:04:10,080 --> 00:04:15,140
We cannot do it for every element only for lists of elements.

70
00:04:15,150 --> 00:04:21,520
OK so now why did we use the ID of these items for the key when they actually got rendered.

71
00:04:21,770 --> 00:04:27,740
Well as you might imagine the idea here is that every one of these items is going to eventually be represented

72
00:04:27,770 --> 00:04:35,290
as a div or maybe a lie or a span or whatever type of element we decide to use whenever we use a key.

73
00:04:35,300 --> 00:04:42,410
We try to use a key property or a value for this key that corresponds to one distinct element in the

74
00:04:42,410 --> 00:04:46,540
array of items that we are iterating over or trying to render out into the DOM.

75
00:04:46,610 --> 00:04:52,670
In practice that usually ends up being very convenient to just use a id property if we have one for

76
00:04:52,670 --> 00:04:55,310
these items that we are trying to iterate over.

77
00:04:55,310 --> 00:05:00,860
Now it turns out that in a vast majority of cases if you're not using like fake or dummy data or something

78
00:05:00,860 --> 00:05:06,110
like that and particularly if you are fetching data from some outside API it turns out that just about

79
00:05:06,140 --> 00:05:10,610
every time you get a list of items that you want to show them as a list you will very frequently have

80
00:05:10,670 --> 00:05:16,070
an id property because this id property uniquely identifies this record.

81
00:05:16,070 --> 00:05:21,520
It is perfectly suited to serve as a key when we are rounding our list as well.

82
00:05:21,830 --> 00:05:22,980
OK so that's the idea.

83
00:05:23,210 --> 00:05:24,640
Let's take a quick pause right here.

84
00:05:24,740 --> 00:05:28,910
When we come back the next section we're going to add in some keys to these images that we are rendering

85
00:05:28,970 --> 00:05:31,540
and hopefully we're going to get that error message to go away.