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 four 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.

The Array() constructor and fill(<Post>) will return an array with four <Post /> components. It will be four because we pass the number argument to Array() constructor.

We can embed this JavaScript expression directly in JSX. The expression returns an array with four components, so JSX will render the same component (<Post>) four times.

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 four items and then use map() to create a component for every item in the array.

Array items are only placeholders. 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 component 4 times, use fill() to create array with four items.

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

Apply the map() method to render a component multiple times.

Pass two arguments to the 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 multiple components 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:

React