Let’s get back to React before I get carried away by arrays…

This line of React blew my mind:

<ul>{items.map(item => <li>{item}</li>}</ul>

In every framework I’d used, before React, I’d used iteration to produce lists — each, forEach, repeat, etc.

But React components understand arrays!

<div>{[1, "2", (three = 3), true && "4"]}</div>

And those arrays can hold more React Elements:

<ul>{[<li>1</li>, <li>2</li>, <li>3</li>]}</ul>

Of course using arrays for static content — like this —feels silly. Which brings us back to our dynamic start:

<ul>{[1, 2, 3, 4].map(item => <li>{item}</li>}</ul>

Turns out this line that blew my mind was just a normal array and a very clever framework!

Explore:

Explore arrays as Children in this CodeSandbox. It uses a small component to render the data type and count of the provided Children. When it comes to Children, I find it an easier abandon JSX. Let me know if rolling without JSX reinforces your understanding of Children.