Creating a loop to insert multiple instances of the same React component

Question

I'm trying to figure out a way to use a loop to create multiple instances of a react component. Something like this:

export default function Squares() {

  return (
    <>
    {for(let i = 0;i < 25;i++) {
      <ReactComponent />
    }}
    </>
  )
}

This doesn't obviously work, but this is the general idea of what I'm trying to accomplish. Thank you for any help in advance!

Does this answer your question? [How to append something to an array?](https://stackoverflow.com/questions/351409/how-to-append-something-to-an-array) — Andreas is moving to Codidact, Jul 25 '20 at 01:24

score 2 · Accepted Answer · answered Jul 25 '20 at 01:19

Just put them in an array.

export default function Squares() {
  const children = [];  
  for(let i = 0;i < 25;i++) {
    children.push(<ReactComponent />);
  }

  return children;
  // or
  return (
    <SomeWrapperComponentOrFragment>
      {children}
    </SomeWrapperComponentOrFragment>
  );
}

score 2 · Answer 2 · answered Jul 25 '20 at 02:38

Remember to add key value for each component. As well use shrink fragment as you are correctly doing. But abstract logic code outside of return.

export default function Squares() {
    const generateList = (max=1) => {
        const arr = [];
        for (let i = 1; i < max; i++) {
            arr.push(<ReactComponent key={`id-${i}`} />);
        }
    };

    return (
        <>
            {generateList}
        </>
    );
}

Creating a loop to insert multiple instances of the same React component

2 Answers2