So now that we have configured Abdul GS as well as our API and other components, now the only component
that remains is character list.
Now, apart from character list, we will be also needing another component that will be making inside
our components folder.
And that is going to be character list items because initially will be mapping our data from character
to character list items.
So before we do that, let's just pass our data to our catalyst for that purpose.
We're passing it with a diver props.
So this should be called items now hit save.
So now that we are passing on data from cattle, from our add badges to our catalyst badges, let's
head to a catalyst or GSX.
OK, so we have this now we'll be removing this paragraph element because it's a binder populated with
real time data.
Now inside the catalyst lets the structure and what we are receiving is items.
OK, so we have received our items now.
After that, we have received them.
We are going to map them.
So instead of, let's create a section, let's just remove this leaves and will be creating a section.
And close this section.
Now, this section has to have a class name, so let's just give it a class name, of course, because
later on we will be adding cases to it.
Now inside this chain, we are going to have other elements.
For now, we have react.
We have restructured our data.
So now the only piece of code that remains is to map our data.
So we have received our items and our collaborators mapping out items.
So items start map.
And each time it is going to take up a single item.
And take that item and pass it to other component that will making soon.
So Item is going to pass this data to a component that will be naming us catalyst.
Item, and let's just close this one off.
OK, so we are yet to create the list item, so you head to your components folder and let's just make
another file known as catalyst items.
Hit save now.
Let's move to the list and import items.
So just import character list items
from the same directory that is a component factory and inside this will be according to list items
not set.
OK, so we are now calling list items.
Now we need to give this data so each time will be giving it a single users data so that there's going
to be an item.
So let's just give it that item.
And apart from item, we'll also be giving it a key because otherwise the act would be getting it as
that every element should have a unique key.
So let's just give it a key and he's going to be the item carried.
So the key is going to be item the guy with an undisclosed I.D..
Now, it's not the time to populate the list items, so had the idea to list items that.