Welcome back.
In the previous video, we were able to render some lists of data as that, but we encountered a particular
error and that is each child in a list to have a unique key prop.
So what is the key?
Why do we need it and why do we care about and that is what we are going to talk about in this particular
video.
So a key is a unique identifier that we ACT uses to identify each component in a list.
Keys, help react, understand which items have changed or are added or are removed, and they can also
be used to improve performance when wrangling large lists.
So what I mean here is that where we act want to know in a time we display some list of data, we actually
want to know which particular item has been displaced so that we can keep track of.
For example, if we remove or delete a particular data here or component here, React is going to update
that particular component rather than the entire component.
And that is why it's also improved performance and that's a good part of it.
So how can we make use of prop a key prop here?
So coming back, let's fix that error where we are rendering the I mean, the G6 here, we see that
on every loop we are creating a new react element.
So we want to keep track each element.
You have a unique key but unlucky.
For us, this product has no ID, right?
So we can use let's take it and let's say let's use an ID for it and let's use data now.
Data from JavaScript or we can use.
Let's see one here.
I can make it more simple here.
One and let's say ID number two.
If you get this data from database, you're going to have the IDs automatically.
So you have a unique identifier that is unique across all these ones.
So so for this one, you can use a name, but a product might have a unique name.
Sorry, the same name.
So to avoid that, we're going to use the ID to identify.
So where we are rendering it, look at the parent element, which is the div.
So I'm going to provide a key prop and then the key is from the product.
And then when you put that, we have the ID.
So with this one ID, if I save it now let's check the console.
Refresh it one more time and check the console.
Now is no more.
Now React is happy about that.
So that is it about the key prop here.
And in this video we talk about a fragment in React.