99.7% of software development in one requirement
A user should be able to view a list of items.
— @samccone

Listen to Sam. Lists make Apps.

Array of sunshine

The children of a component can be an array.

<div>{[1, 2, 3]}</div>

The resulting DOM will look like this:

<div>123</div>

Because components are just functions, arrays can hold components.

<ul>{[<li>one</li>, <li>two</li>]}</ul>

Resulting in DOM like this:

<ul>
  <li>one</li>
  <li>two</li>
</ul>

Data in, components out

Let’s use map() to turn an array of data into an array of components.

const countdown = [3, 2, 1];
const millenialCountdown = countdown.map(n => <strong>{n} 👏</strong>); 

Let’s use that technique to show the abilities of our Pokemon.

<ul>
  {this.state.character.abilities.map(ability => 
    <li>{ability.ability.name}</li>
  )}
</ul>

(The API is a little redundant here. Sorry)

Tinker with it

Use the workspace below and explore arrays as children.

• Inspect the API and render another list you find.
• Arrays have a lot of methods. Try filtering or sorting the abilities.