To render the same component multiple times in React, you need to do two things:

  1. Create an array with multiple instances of that component
  2. Use curly braces to embed that array in JSX.

There are multiple ways to get the array of components.

Render a component multiple times

To render multiple components, React developers usually loop through an existing array (usually an array of objects) and create a new array of components. Then we embed the new array in JSX.

If you don’t have an array, you can simply use the Array() constructor and fill() method to create an array with any number of identical components.

Let’s look at code example

export default function App() {
  return <div className="App">{Array(4).fill(<Post />)}</div>;
}
function Post() {
  return <div>I'm a post</div>;
}

The fill() method will add four copies of <Post> component to the array.

Array() creates an empty array, and fill(<Post>) will add four <Post /> components to the array. We specify four arguments by passing that number to the Array() constructor.

You can store the result of Array() and fill() in a variable and then embed that variable in JSX. Or you can create an array with components directly within JSX.

Note: when you render a component multiple times in React, every instance must have a unique key value, so React can identify them.

fill() does not allow you to specify unique key value for each component. It creates an exact copy of each component.

So if you use this method to render a component multiple times, React will give you a warning that every instance must have a unique key value.

Using map() to render the same component multiple times

This is a small improvement upon the previous approach.

We still use Array() and fill() to create an array with a specified number of items (in this example, 4). Then use map() to create a component for every item in the array.

Initially, we fill() the array with a boolean value true. You can use any other value, true is just a placeholder, so we can later iterate over the array using map() method.

map() will ‘do something’ for every item in the array. We want to use map() to render a component for every item in the array.

So if you need to render the same component X number of times, use fill() to create array with that number of items.

Let’s look at this example:

Once we have an array with certain number of items, we apply the map() method to render a component for every item in the array.

Pass two arguments to the map() callback function. As usual, the first argument will represent each item in the array. Second argument is optional, and represents index of the item in the array.

In the body of callback function, return <Post> component and set its key attribute to index.

Every item in the array has a different index. Because key is set to index, every instance of the component will have a different key value.

Render the same component multiple times in a loop

You can also write a for loop to render the same component multiple times.

First, you need to create an array.

Then write a for loop and push() the component into the array as many times as you need. Set their key attribute to index value.

Let’s look at the example:

export default function App() {
  let componentsArr = [];
  for (let i = 0; i <= 2; i++) {
    componentArr.push(<Post key={i} />);
  }
  return <div>{componenstArr}</div>;
}

We set up the for loop to execute three times – start from index 0, then index 1, execute for index 2, and stop.

For every iteration, we push() the <Post> component into the componentArr array, with key attribute set to i, which will be a different number every time.

To render multiple components from the loop, we wrap componentsArr in curly braces to reference it.

The App component will display three posts, like this:

UI Libraries