Iterate through a JavaScript Array with JSX and the `Array.map()` method

Simon Vrachliotis: [0:00] We have an array of name objects in our App. Instead of just JSON.stringifying it, we want to display them in a nicely styled unordered list. Basically, we want to output a <ul> tag and then a series of <li> elements, one for each name. Each <li> should have a class of boy or girl to get the styling.

[0:19] We need to wrap each name in a button component, because we are going to allow users to click on each name. There. Looks pretty good now.

[0:28] How do we loop over each name and output an <li> element? When using a templating language, we sometimes have syntax like v-for in Vue.js, ng-for in Angular, or for name in names in Twig. JSX is not a templating language. It's just JavaScript. There are no templating helpers, but we have access to the full power of JavaScript.

[0:51] We have our names in an array. You can use the array .map method, for example, and for each entry in the array return a chunk of JSX.

[1:00] Let's return a list item with entry.name inside it. Just like that, we can see all our names listed on the page. If we open up the console, we can see that React is complaining about a missing unique key. We can use the entry.id for that and pass it in a key prop on the <li> element. Let's also add a className and set it to be entry.sex, which will be either boy or girl.

[1:26] Finally, let's wrap the entry.name inside a button and voilà. Our list of names is there and looking good.