⚛️🌲 React Holiday


We'll start from basics and get all the way to Suspense, Hooks, and advanced composition!
Each day is a 2-3 minute read with CodeSandbox and quick assignments.
Check out 2017 (below) for examples.

Day 14: Lists are 99.7% of the job

December 14, 2017

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.

chantastic

Written by chantastic.
Follow his nonsense on Twitter.