In this video we're going to take a look at two different ways that we can implement this key property
and make this warning message go away.
The reason I'm going to show you two different ways is that when you start to look at some documentation
and blog posts and whatnot you're going to very frequently see both of these different ways of adding
in a key prop.
Sometimes it's going to be really convenient to use one way sometimes it'll be convenient to use the
other way.
And it's really going to be up to you which way to use.
OK.
So me you the first way we can do this.
The first way to add in a key prop and allow React Native to essentially associate one of these objects
right here with what appears on the screen is to find these original objects and to each object.
We're going to add in a key property the requirement of a key property is that it must be a string.
It must be consistent between renders and it must be unique compared to all the other objects inside
our of our array of data so in this case I might put in a key right here of just like one.
And notice how one is a string.
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
not a number then on the next one I could do a key of two and essentially repeat the process going down.
I'm going to just copy paste here really quickly
and I'll update each one to be unique.
So now if I save this the warning message goes away.
Because now we're providing that key property.
So this is the first way that you might see a key being designated for a flat list element.
Essentially we add in a key property to each of the original objects.
The only requirement once again is that it must be a string and it must be unique compared to all the
other elements inside the array you'll notice that if we change say key number two right here to be
one as well.
We now have two elements with the key of one.
This is going to confuse React Native.
This remember is essentially using that key to tie some object to some element that gets displayed on
the screen.
So if there are two elements on the screen with the same key and two objects inside of array if we now
delete one of these objects right here React Native is going to say hey well now there's no longer a
key of A appearing twice.
So which one of these two should I delete.
And it gets really unclear to react native as to which one is it should clean up.
Let's try this out.
I'll save this with the two identical keys very quickly see a warning message here that says two identical
keys of one.
And it tells us very distinctly these keys have to be unique.
OK so I'll change that back to Key two.
And the warning goes away.
Very good.
All right.
Let's method one of defining our key prop I'm going to show you method two.
So I'm going to delete all these extra key properties I just added on now back to the code I had before
the second wave to finding this key property is on our flat list component itself on the flat list component.
I'm going to add in a new prop of key extractor going to pass this thing a function this function is
going to be called many different times.
It's going to be called with a single argument that we're going to call a friend.
This friend argument right here is going to be first this object then this object then this object and
so on.
So our key extractor will be called with every object inside of our array inside this function.
We have to inspect that object and then return the key property to use for it.
So the only difference here is that now we're going to essentially define our key property like at runtime
right here when we pass our data into flat list as opposed to kind of ahead of time on our list of friend
objects so once again we can return some unique character or some unique string that is consistent across
re renders of our list.
So in this case we might try using say our name property.
Notice how the name property is a string so that suits requirement number one of being a key and it's
unique compared to all the different objects inside of our Rea.
So this name property would be perfect to use as a key as well.
It doesn't have to be a number that or see a string that contains a number it can be any string of characters.
It just has to be unique.
That's the only requirement so from key extractor we could return Rand dot name.
So now we're using that name property as our key so I can save this.
And once again we no longer see that warning message.
All right.
So once again that's two different ways to solve this key issue.
You're going to see both methods used very frequently inside of documentation in this course.
You and I are going to kind of favor this key extractor approach because it's one tiny line of code
and it doesn't require us to modify these original objects right here in general whenever working with
some data like this some array of objects.
We really want to keep just the data related to that object inside the object itself.
So what I mean by that is right now we have an array of friends.
So all these objects should really only contain data related to being a friend.
In this case it just means it has a name.
If we start to add in a new key property then we're starting to tie some information from the view side
of our application like what appears on the screen to our data objects which is generally not a very
good approach.
So like I said we're going to favor this key extractor approach as much as possible inside this force.
All right.
So now we've got this problem fixed up.
Let's take a quick pause right here and continue in the next video.