1
00:00:01,100 --> 00:00:04,580
In this video we're going to take a look at two different ways that we can implement this key property

2
00:00:04,790 --> 00:00:06,890
and make this warning message go away.

3
00:00:06,890 --> 00:00:10,580
The reason I'm going to show you two different ways is that when you start to look at some documentation

4
00:00:10,580 --> 00:00:15,650
and blog posts and whatnot you're going to very frequently see both of these different ways of adding

5
00:00:15,680 --> 00:00:17,240
in a key prop.

6
00:00:17,240 --> 00:00:21,080
Sometimes it's going to be really convenient to use one way sometimes it'll be convenient to use the

7
00:00:21,080 --> 00:00:21,640
other way.

8
00:00:21,680 --> 00:00:23,560
And it's really going to be up to you which way to use.

9
00:00:23,960 --> 00:00:24,200
OK.

10
00:00:24,210 --> 00:00:26,410
So me you the first way we can do this.

11
00:00:26,660 --> 00:00:31,790
The first way to add in a key prop and allow React Native to essentially associate one of these objects

12
00:00:31,790 --> 00:00:37,130
right here with what appears on the screen is to find these original objects and to each object.

13
00:00:37,190 --> 00:00:43,620
We're going to add in a key property the requirement of a key property is that it must be a string.

14
00:00:43,850 --> 00:00:49,190
It must be consistent between renders and it must be unique compared to all the other objects inside

15
00:00:49,220 --> 00:00:55,460
our of our array of data so in this case I might put in a key right here of just like one.

16
00:00:55,490 --> 00:00:57,450
And notice how one is a string.

17
00:00:57,560 --> 00:01:01,880
If we put in a key as a number we're still going to get a warning message because it has to be a string

18
00:01:01,940 --> 00:01:08,920
not a number then on the next one I could do a key of two and essentially repeat the process going down.

19
00:01:09,180 --> 00:01:11,360
I'm going to just copy paste here really quickly

20
00:01:14,370 --> 00:01:20,420
and I'll update each one to be unique.

21
00:01:20,480 --> 00:01:22,970
So now if I save this the warning message goes away.

22
00:01:23,000 --> 00:01:25,250
Because now we're providing that key property.

23
00:01:25,310 --> 00:01:30,450
So this is the first way that you might see a key being designated for a flat list element.

24
00:01:30,470 --> 00:01:34,520
Essentially we add in a key property to each of the original objects.

25
00:01:34,550 --> 00:01:38,990
The only requirement once again is that it must be a string and it must be unique compared to all the

26
00:01:38,990 --> 00:01:44,400
other elements inside the array you'll notice that if we change say key number two right here to be

27
00:01:44,400 --> 00:01:45,240
one as well.

28
00:01:45,240 --> 00:01:47,850
We now have two elements with the key of one.

29
00:01:47,850 --> 00:01:49,870
This is going to confuse React Native.

30
00:01:49,870 --> 00:01:55,350
This remember is essentially using that key to tie some object to some element that gets displayed on

31
00:01:55,350 --> 00:01:56,460
the screen.

32
00:01:56,520 --> 00:02:01,950
So if there are two elements on the screen with the same key and two objects inside of array if we now

33
00:02:01,950 --> 00:02:07,200
delete one of these objects right here React Native is going to say hey well now there's no longer a

34
00:02:07,200 --> 00:02:09,330
key of A appearing twice.

35
00:02:09,330 --> 00:02:11,820
So which one of these two should I delete.

36
00:02:11,820 --> 00:02:15,880
And it gets really unclear to react native as to which one is it should clean up.

37
00:02:16,110 --> 00:02:17,340
Let's try this out.

38
00:02:17,340 --> 00:02:22,320
I'll save this with the two identical keys very quickly see a warning message here that says two identical

39
00:02:22,320 --> 00:02:23,750
keys of one.

40
00:02:23,880 --> 00:02:28,300
And it tells us very distinctly these keys have to be unique.

41
00:02:28,400 --> 00:02:30,450
OK so I'll change that back to Key two.

42
00:02:30,470 --> 00:02:31,800
And the warning goes away.

43
00:02:31,920 --> 00:02:33,090
Very good.

44
00:02:33,090 --> 00:02:33,320
All right.

45
00:02:33,350 --> 00:02:36,940
Let's method one of defining our key prop I'm going to show you method two.

46
00:02:37,370 --> 00:02:44,000
So I'm going to delete all these extra key properties I just added on now back to the code I had before

47
00:02:44,840 --> 00:02:50,520
the second wave to finding this key property is on our flat list component itself on the flat list component.

48
00:02:50,540 --> 00:02:58,250
I'm going to add in a new prop of key extractor going to pass this thing a function this function is

49
00:02:58,250 --> 00:03:00,700
going to be called many different times.

50
00:03:00,770 --> 00:03:05,250
It's going to be called with a single argument that we're going to call a friend.

51
00:03:05,420 --> 00:03:11,900
This friend argument right here is going to be first this object then this object then this object and

52
00:03:11,900 --> 00:03:13,040
so on.

53
00:03:13,040 --> 00:03:17,990
So our key extractor will be called with every object inside of our array inside this function.

54
00:03:18,020 --> 00:03:22,530
We have to inspect that object and then return the key property to use for it.

55
00:03:22,550 --> 00:03:27,530
So the only difference here is that now we're going to essentially define our key property like at runtime

56
00:03:27,590 --> 00:03:33,830
right here when we pass our data into flat list as opposed to kind of ahead of time on our list of friend

57
00:03:33,830 --> 00:03:41,270
objects so once again we can return some unique character or some unique string that is consistent across

58
00:03:41,630 --> 00:03:44,020
re renders of our list.

59
00:03:44,030 --> 00:03:48,150
So in this case we might try using say our name property.

60
00:03:48,160 --> 00:03:53,510
Notice how the name property is a string so that suits requirement number one of being a key and it's

61
00:03:53,510 --> 00:03:56,990
unique compared to all the different objects inside of our Rea.

62
00:03:57,020 --> 00:04:00,150
So this name property would be perfect to use as a key as well.

63
00:04:00,200 --> 00:04:05,120
It doesn't have to be a number that or see a string that contains a number it can be any string of characters.

64
00:04:05,120 --> 00:04:06,530
It just has to be unique.

65
00:04:06,530 --> 00:04:12,260
That's the only requirement so from key extractor we could return Rand dot name.

66
00:04:12,280 --> 00:04:16,610
So now we're using that name property as our key so I can save this.

67
00:04:16,660 --> 00:04:19,840
And once again we no longer see that warning message.

68
00:04:20,050 --> 00:04:20,260
All right.

69
00:04:20,260 --> 00:04:22,810
So once again that's two different ways to solve this key issue.

70
00:04:22,810 --> 00:04:27,280
You're going to see both methods used very frequently inside of documentation in this course.

71
00:04:27,280 --> 00:04:32,200
You and I are going to kind of favor this key extractor approach because it's one tiny line of code

72
00:04:32,470 --> 00:04:37,540
and it doesn't require us to modify these original objects right here in general whenever working with

73
00:04:37,540 --> 00:04:39,940
some data like this some array of objects.

74
00:04:40,030 --> 00:04:45,680
We really want to keep just the data related to that object inside the object itself.

75
00:04:45,700 --> 00:04:48,520
So what I mean by that is right now we have an array of friends.

76
00:04:48,610 --> 00:04:53,530
So all these objects should really only contain data related to being a friend.

77
00:04:53,560 --> 00:04:55,960
In this case it just means it has a name.

78
00:04:55,960 --> 00:05:01,150
If we start to add in a new key property then we're starting to tie some information from the view side

79
00:05:01,210 --> 00:05:06,340
of our application like what appears on the screen to our data objects which is generally not a very

80
00:05:06,340 --> 00:05:07,560
good approach.

81
00:05:07,570 --> 00:05:12,950
So like I said we're going to favor this key extractor approach as much as possible inside this force.

82
00:05:13,180 --> 00:05:13,420
All right.

83
00:05:13,420 --> 00:05:14,880
So now we've got this problem fixed up.

84
00:05:14,890 --> 00:05:17,380
Let's take a quick pause right here and continue in the next video.