Лучший способ создать n одинаковых компонентов в React

Question

Суть:

У нас есть число n, которое говорит, сколько компонентов Component должно быть отредеренно внутри родительского блока Parent. Например, если n = 3, то в итоге должно получиться вот так:

<Parent>
    <Component />
    <Component />
    <Component />
</Parent>

Но если компонентов больше, то вписывать их вручную не очень хочется.

Как решаю проблему сейчас?

Создаю массив c n пустыми значениями и заполняю их нулями, например, чтобы можно было применить метод map. Затем, собственно делаю из нулей компоненты:

<Parent>
    {Array(n).fill(0).map( (item, index) => <Component key={index} /> )}
</Parent>

Работает прекрасно - выглядит ужасно и нечетабельно. Я не заполняю массив напрямую нужным компонентом т.к. в этом случае мне не удастся передать key.

Вопрос:

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

Answer 1

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

мой вариант. и оператор spread (троеточие) здесь наобходим, так как просто Array(n) создаст массив со свойством length: n, но без ключей, потому метод map не сработает

БЛОГ НА HUSL

Лучший способ создать n одинаковых компонентов в React

Ответы (1 шт):