Often, you will want to display multiple similar components from a collection of data. You can use JavaScript's array methods like `map()` to transform an array of data into an array of React elements.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}> {/* Key is important! */}
    {number}
  </li>
);

// ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

The Importance of Keys

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.

If you don't have stable IDs for rendered items, you may use the item's index as a key as a last resort, but this can lead to issues if the order of items may change.