How to add loop with React JSX?

To add loop with React JSX, we use the array map method.

For instance, we write

<div>
  {[...Array(10)].map((x, i) => (
    <ObjectRow key={i} />
  ))}
</div>

to render the array’s data by creating array with 10 entries with Array(10).

Then we call map with a callback that returns the ObjectRow component to render its contents.

We set the key prop to i to set a unique key for each item.