Return to Answer

With time, the language is becoming more mature, and we often stumble upon common problems like this. The problem is to loop a Component 'n' times.

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

where, n -is the number of times you want to loop. item will be undefined and index will be as usual. Also, eslint discourages using an array index as key.

But you have the advantage of not requiring to initialize the array before and most importantly avoiding the for loop...

edit: to avoid the inconvenience of item as undefined you can use an _ , so that it will be ignored when linting and won't throw any linting error, such as

{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}

With time, the language is becoming more mature, and we often stumble upon common problems like this. The problem is to loop a Component 'n' times.

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

where, n -is the number of times you want to loop. item will be undefined and index will be as usual. Also, ESLint discourages using an array index as key.

But you have the advantage of not requiring to initialize the array before and most importantly avoiding the for loop...

To avoid the inconvenience of item as undefined you can use an _, so that it will be ignored when linting and won't throw any linting error, such as

{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}

With time, the language is becoming more mature, and we often stumble upon common problems like this. The problem is to loop a Component 'n' times.

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

where, n -is the number of times you want to loop. item will be undefined and index will be as usual. Also, eslint discourages using an array index as key.

But you have the advantage of not requiring to initialize the array before and most importantly avoiding the for loop...

With time, the language is becoming more mature, and we often stumble upon common problems like this. The problem is to loop a Component 'n' times.

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

where, n -is the number of times you want to loop. item will be undefined and index will be as usual. Also, eslint discourages using an array index as key.

But you have the advantage of not requiring to initialize the array before and most importantly avoiding the for loop...

edit: to avoid the inconvenience of item as undefined you can use an _ , so that it will be ignored when linting and won't throw any linting error, such as

{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}

i understand this is an old question, but with time the language is becoming more mature and we often stumble upon common problems like this, the problem is to loop a Component 'n' times.

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

where, n -is the number of times you want to loop. item, will be undefined and index will be as usual. also, eslint discourages using array index as key.

but you have the advantage of not requiring to initialize the array before and most importantly avoiding the for loop..

With time, the language is becoming more mature, and we often stumble upon common problems like this. The problem is to loop a Component 'n' times.

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

where, n -is the number of times you want to loop. item will be undefined and index will be as usual. Also, eslint discourages using an array index as key.

But you have the advantage of not requiring to initialize the array before and most importantly avoiding the for loop...