Display UI for List Items in JSX with Map
Just about every application needs to render a list of values at some point. Since most of the work we do in React is "just JavaScript", we'll use standard, JavaScript array methods to handle that. In this lesson, we'll iterate over a list of objects with the Array.prototype.map method and for each item, we'll render the corresponding JSX for that item's UI. We'll also cover the key prop, which React will use to optimize how it handles changes to the list when rendering.
Instructor: [00:00] We have an API call that returns an array of cards. Right now, we have this snippet of code that's just dumping the JSON data onto the page. Instead of this output, we want to take each record that's returned and render it as one of these card preview components.
[00:16] Let's go back to our code. We'll start by removing this pre tag. Then I'm going to remove these copies of card preview. Let's just leave one behind. I'm going to open up with curly braces. I'm going to reference the card's value from our state. Cards is an array, so I can use the array map method on that.
[00:37] For each iteration over this cards array, we'll get access to the card. Then we went to return some JSX. In this case, we're going to take this card preview. We're going to cut it from here. I'm going to stick it right in there.
[00:51] With that done, I'm going to come in here and I'm going to replace the definition that's hard-coded with card.definition. I'm going to replace the hard-coded term with card.term. We'll save this. I'll go back to the browser. Now our JSON should be gone and we should see these three cards, but these cards got here by iterating over the API data.
[01:18] I'm going to show DevTools for a second. What we'll see here is that we have one warning in the console. This is telling us that each child on the list should have a unique key prop.
[01:28] We're going to go back to our code. In the card preview component, we're going to add key. This isn't a prop that we define. This is something that React's looking for. We're going to assign that a unique value, which in our case is going to be the card's ID. I'll save this again and go back to the browser.
[01:45] It should render again. We'll see that we no longer have the console error. Let's do one small refactor. I'm going to come back to the code. I'm going to come up here to card. Instead of just getting the card, I'm going to destructure this. I'm just going to grab the properties that I need from it.
[02:01] I'm going to grab ID, definition, and term. Then I'm going to come down here. I'm going to remove the card.references from all three of these. I'll save it. We can go back to the browser and just verify that it still works. Everything looks good.