Суть:
У нас есть число 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
.
Вопрос:
Как также просто (в одну строчку), но более изящно и понятно для других, сделать тоже самое?