React Holiday

Day 14: Lists are 99.7% of the job

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

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:


Because components are just functions, arrays can hold components.

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

Resulting in DOM like this:


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 = => <strong>{n} 👏</strong>); 

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

  { => 

(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.