1 00:00:00,480 --> 00:00:01,770 Welcome back. 2 00:00:01,890 --> 00:00:11,580 In the previous video, we were able to render some lists of data as that, but we encountered a particular 3 00:00:11,580 --> 00:00:17,480 error and that is each child in a list to have a unique key prop. 4 00:00:17,490 --> 00:00:18,900 So what is the key? 5 00:00:19,230 --> 00:00:25,860 Why do we need it and why do we care about and that is what we are going to talk about in this particular 6 00:00:25,860 --> 00:00:26,520 video. 7 00:00:26,730 --> 00:00:34,680 So a key is a unique identifier that we ACT uses to identify each component in a list. 8 00:00:34,980 --> 00:00:43,290 Keys, help react, understand which items have changed or are added or are removed, and they can also 9 00:00:43,290 --> 00:00:48,100 be used to improve performance when wrangling large lists. 10 00:00:48,120 --> 00:00:56,650 So what I mean here is that where we act want to know in a time we display some list of data, we actually 11 00:00:56,700 --> 00:01:02,490 want to know which particular item has been displaced so that we can keep track of. 12 00:01:02,490 --> 00:01:10,740 For example, if we remove or delete a particular data here or component here, React is going to update 13 00:01:10,740 --> 00:01:14,430 that particular component rather than the entire component. 14 00:01:14,430 --> 00:01:20,100 And that is why it's also improved performance and that's a good part of it. 15 00:01:20,100 --> 00:01:23,840 So how can we make use of prop a key prop here? 16 00:01:23,850 --> 00:01:31,110 So coming back, let's fix that error where we are rendering the I mean, the G6 here, we see that 17 00:01:31,110 --> 00:01:35,220 on every loop we are creating a new react element. 18 00:01:35,220 --> 00:01:37,860 So we want to keep track each element. 19 00:01:37,860 --> 00:01:40,620 You have a unique key but unlucky. 20 00:01:40,620 --> 00:01:43,260 For us, this product has no ID, right? 21 00:01:43,260 --> 00:01:50,550 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. 22 00:01:51,830 --> 00:01:54,410 Data from JavaScript or we can use. 23 00:01:54,410 --> 00:01:55,480 Let's see one here. 24 00:01:55,490 --> 00:01:57,080 I can make it more simple here. 25 00:01:57,230 --> 00:02:01,420 One and let's say ID number two. 26 00:02:01,430 --> 00:02:05,450 If you get this data from database, you're going to have the IDs automatically. 27 00:02:05,720 --> 00:02:10,750 So you have a unique identifier that is unique across all these ones. 28 00:02:10,759 --> 00:02:16,010 So so for this one, you can use a name, but a product might have a unique name. 29 00:02:16,010 --> 00:02:17,470 Sorry, the same name. 30 00:02:17,480 --> 00:02:20,980 So to avoid that, we're going to use the ID to identify. 31 00:02:20,990 --> 00:02:25,370 So where we are rendering it, look at the parent element, which is the div. 32 00:02:25,880 --> 00:02:31,760 So I'm going to provide a key prop and then the key is from the product. 33 00:02:31,760 --> 00:02:34,970 And then when you put that, we have the ID. 34 00:02:35,300 --> 00:02:40,580 So with this one ID, if I save it now let's check the console. 35 00:02:40,580 --> 00:02:43,070 Refresh it one more time and check the console. 36 00:02:43,070 --> 00:02:44,690 Now is no more. 37 00:02:44,720 --> 00:02:47,870 Now React is happy about that. 38 00:02:48,200 --> 00:02:52,070 So that is it about the key prop here. 39 00:02:52,070 --> 00:02:57,470 And in this video we talk about a fragment in React.