1 00:00:01,600 --> 00:00:07,420 So now that we have configured Abdul GS as well as our API and other components, now the only component 2 00:00:07,420 --> 00:00:09,640 that remains is character list. 3 00:00:10,150 --> 00:00:14,710 Now, apart from character list, we will be also needing another component that will be making inside 4 00:00:14,710 --> 00:00:15,700 our components folder. 5 00:00:15,880 --> 00:00:22,930 And that is going to be character list items because initially will be mapping our data from character 6 00:00:23,080 --> 00:00:24,250 to character list items. 7 00:00:24,940 --> 00:00:30,430 So before we do that, let's just pass our data to our catalyst for that purpose. 8 00:00:31,000 --> 00:00:32,980 We're passing it with a diver props. 9 00:00:34,030 --> 00:00:37,960 So this should be called items now hit save. 10 00:00:38,350 --> 00:00:44,650 So now that we are passing on data from cattle, from our add badges to our catalyst badges, let's 11 00:00:44,650 --> 00:00:46,390 head to a catalyst or GSX. 12 00:00:47,860 --> 00:00:53,410 OK, so we have this now we'll be removing this paragraph element because it's a binder populated with 13 00:00:53,410 --> 00:00:54,220 real time data. 14 00:00:55,090 --> 00:01:01,210 Now inside the catalyst lets the structure and what we are receiving is items. 15 00:01:01,900 --> 00:01:04,570 OK, so we have received our items now. 16 00:01:04,570 --> 00:01:05,980 After that, we have received them. 17 00:01:05,980 --> 00:01:07,300 We are going to map them. 18 00:01:07,570 --> 00:01:13,210 So instead of, let's create a section, let's just remove this leaves and will be creating a section. 19 00:01:16,290 --> 00:01:18,210 And close this section. 20 00:01:22,950 --> 00:01:29,100 Now, this section has to have a class name, so let's just give it a class name, of course, because 21 00:01:29,550 --> 00:01:31,170 later on we will be adding cases to it. 22 00:01:31,800 --> 00:01:34,140 Now inside this chain, we are going to have other elements. 23 00:01:34,410 --> 00:01:36,270 For now, we have react. 24 00:01:36,750 --> 00:01:38,250 We have restructured our data. 25 00:01:38,760 --> 00:01:42,090 So now the only piece of code that remains is to map our data. 26 00:01:42,720 --> 00:01:47,070 So we have received our items and our collaborators mapping out items. 27 00:01:47,520 --> 00:01:48,780 So items start map. 28 00:01:49,620 --> 00:01:52,410 And each time it is going to take up a single item. 29 00:01:54,360 --> 00:01:58,980 And take that item and pass it to other component that will making soon. 30 00:01:59,340 --> 00:02:05,790 So Item is going to pass this data to a component that will be naming us catalyst. 31 00:02:08,030 --> 00:02:11,870 Item, and let's just close this one off. 32 00:02:12,530 --> 00:02:17,780 OK, so we are yet to create the list item, so you head to your components folder and let's just make 33 00:02:17,780 --> 00:02:19,760 another file known as catalyst items. 34 00:02:31,760 --> 00:02:32,840 Hit save now. 35 00:02:33,560 --> 00:02:36,380 Let's move to the list and import items. 36 00:02:36,740 --> 00:02:38,510 So just import character list items 37 00:02:41,630 --> 00:02:46,970 from the same directory that is a component factory and inside this will be according to list items 38 00:02:47,540 --> 00:02:48,120 not set. 39 00:02:48,800 --> 00:02:50,930 OK, so we are now calling list items. 40 00:02:51,230 --> 00:02:56,450 Now we need to give this data so each time will be giving it a single users data so that there's going 41 00:02:56,450 --> 00:02:57,260 to be an item. 42 00:02:57,800 --> 00:02:59,270 So let's just give it that item. 43 00:03:02,290 --> 00:03:07,060 And apart from item, we'll also be giving it a key because otherwise the act would be getting it as 44 00:03:07,060 --> 00:03:08,830 that every element should have a unique key. 45 00:03:09,370 --> 00:03:12,760 So let's just give it a key and he's going to be the item carried. 46 00:03:13,840 --> 00:03:20,100 So the key is going to be item the guy with an undisclosed I.D.. 47 00:03:22,570 --> 00:03:28,990 Now, it's not the time to populate the list items, so had the idea to list items that.