In this article, I demonstrate how to render multiple items in React when you are given the required number of items to render.

[Note: This article was originally posted here.]

Starting with an array of items

I recently encountered a situation where I needed to render a given number of elements in React.

Usually, this begins with an array that is used to create the list of elements to render. You could map() the array to the elements or filter the items in the array before rendering the list.

For instance, to render a list of the big five animals, start with an array bigFive:

const bigFive = ['elephant', 'rhino', 'buffalo', 'lion', 'leopard']

And create a BigFive component:

function BigFive (bigFive) {
  return (
    <ul>
      {
        bigFive.map((animal) => {
          return (
            <li key={animal}>{animal}</li>
          )
        })
      }
    </ul>
  )
}

This function component takes a bigFive animals prop and renders an unordered list of the animals. This function maps through each animal in the array returning a li element in a ul. (Note that each list item requires a unique key so that React is able to determine when the list changes and needs to be updated).

That is pretty straight forward.

But how would you do it if you want to render n elements 🤔?

Render n items

Think about it for a minute. How would you render 9 buttons like in this image?

One of the options you have is to make an array of 9 items then render in the usual way using the map() method.

But how would you make that array of 9 elements? Well turns out that in Javascript, you can make an array of elements by calling the Array() constructor with n parameter.

const itemsArray = Array(n)

itemsArray is an array of n elements. However, the elements in the array are empty slots. To use this array to render a list of elements in React, we need to fill the empty slots. We can use the spread operator for that.

const items = [...itemsArray]

In this case, items is an array of n elements that are undefined initially.

Therefore, to render a number of components, you follow these steps:

1. Create an array of size n by calling the Array() method
2. Map through the array and render a list of those elements

Let's us look at how to render the example button array above.

First, create a button element to render.

const Button = () => {
  return (
    <button>X</button>
  )
}

Then render the array of buttons in React.

const ButtonArray = (n) => {
  const nButtons = [...Array(n)]
  return (
    <div>
      {nButtons.map((_, i) => <Button key={i} />)}
    </div>
  )
}

nButtons is an array of n number of elements. The map() method loops through the array and returns the required number of elements.

So to render our sample array of 9 buttons, you pass 9 to ButtonArray component like below.

const App = () => {
  return (
    <ButtonArray count={9} />
  )
}

So there you have it.

Summary

In this article, we reviewed how to render a list of elements in React with the map() method. Then we applied that knowledge together with the Array() method to render a known number of elements.

Happy coding 👋