JIYIK CN >

To create N identical components/elements in React:

1. Use Array.from()the method to generate an array of N elements.
2. Replace each element in an array with its actual component.
3. An array of render elements.

function Header() {
  return <h2>Hello world</h2>;
}

const App = () => {
  const threeHeaders = Array.from({length: 3}, (_, index) => {
    return <Header key={index} />;
  });

  console.log(threeHeaders);

  return <div>{threeHeaders}</div>;
};

export default App;

The code example creates an array of three instances of the Header component and renders them.

We use Array.fromthe method to generate an array with 3 elements.

Array.fromkThe second argument taken by the method is a map function which is called on each element in the array.

In each iteration, we replace the empty element with an instance of the Header element.

threeHeadersThe final result stored in the variable is an array containing three Header component instances.

We rendered the array of components wrapped in a div, but this is not necessary.

function Header() {
  return <h2>Hello world</h2>;
}

const App = () => {
  const threeHeaders = Array.from({length: 3}, (_, index) => {
    return <Header key={index} />;
  });

  console.log(threeHeaders);

  // 👇️ without wrapper div
  return threeHeaders;
};

export default App;

Another approach is to use a simple forloop.

To create N identical components/elements in React:

1. Declare an empty array that will store elements.
2. Use a for loop to iterate N times.
3. In each iteration, push the element into the array.

function Header() {
  return <h2>Hello world</h2>;
}

const App = () => {
  const headers = [];

  const total = 3;

  for (let index = 0; index < total; index++) {
    headers.push(<Header key={index} />);
  }

  console.log(headers);

  return <div>{headers}</div>;
};

export default App;

forThis code snippet achieves the same result using a simple loop.

We loop N times and push the React component into the array in each iteration.

The final step is to render the components array.