How to Render an Array of DOM Elements using JSX in React

Suppose we want to render out a list of dogs (as one does) dynamically in a React component using JSX.

Solution 1: Create an array of DOM elements

One option is to render each JSX element and place them in an array.

const DogList = () => {
  const dogBreeds = ['corgi', 'shih tzu', 'pug'];
  const dogs = [];
  for(const [index, value] of dogBreeds.entries()) {
    dogs.push(<li key={index}>{value}</li>)   
  return <ul>{dogs}</ul>;

Solution 2: Use map() to render an array

Another option is to use map() in our JSX to avoid the for-of loop.

const DogList = () => {
  const dogBreeds = ['corgi', 'shih tzu', 'pug'];
  return (
      {, index) => {
        return <li key={index}>{value}</li>