06.array-as-children.md

06.array-as-children

Providing an array as children is a 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>)