Array As Children

Providing an array as children is very common. It’s how lists are drawn in React.

We use map() to create an array of React Elements for every value in the array.

(<ul>
  {["first", "second"].map((item) => (
    <li>{item}</li>
  ))}
</ul>)

That’s equivalent to providing a literal array.

(<ul>
  {[
    <li>first</li>,
    <li>second</li>
  ]}
</ul>)

This pattern can be combined with destructuring, JSX Spread Attributes, and other components, for some serious terseness.

(<ul>
  {arrayOfMessageObjects.map(({ id, ...message }) =>
    <Message key={id} {...message} />
  )}
</ul>)