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 tag and then a series of elements, one for each name. Each 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: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 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.