Как вывести N экземпляров компонента?

Question

[alex4answ]

Нужно вывести 5 экземпляров компонента, как это сделать?

Сейчас делаю так:

const count = 5; // передается в props
const items = Array(count).fill(1).map( (item, index) => <MyComponent key={`_${index}`} /> );

Можно конечно и так:

const count = 5;
const items = [];

for(let i = 0; i < count; i++) {
  items.push(<MyComponent key={`_${i} />);
}

Разницы +- нет, но я использую свой вариант, чтобы не раздувать размер компонента, т.к. это все в условии.

Какие есть варианты кроме этих двух, может быть вариант что используя совсем мрак, и стоит делать по-другому?

Мне не очень нравится мой вариант из-за сложности, столько шагов чтобы просто заполнить массив.

Answer 1

[Дмитрий]

Самый короткий синтаксис такой

const length= 5; // передается в props
Array.from({ length }, (_, index) => <MyComponent key={`_${index}`} /> );

но вообще достаточно создать один раз функцию в каком-нибудь utils и использовать ее или использовать range из библиотеки lodash