Как в цикле отрисовать компоненту?

Question

[JordanBelford]

Всем привет, нужно отрисовать конкретное количество раз компоненту для этого написал вот такую функцию:

const renderPageNumber = (number) => {
        for (let i = 1; i <= number; i++) {
            <NextIcon i={i} />
        }
    }

но проблема в том, что данная функция возвращает void, return перед компонентой не могу написать. Как можно решить эту проблему?

Comments

[n1ksON]

Вот костыль, наверно есть решение получше:

import React, { useState, useEffect } from 'react';
const Component = () => {
const [nums, setNums] = useState([])
useEffect(() => {
  let arrNumbers = [];
  for (let i = 1; i <= number; i++) {
    arrNumbers.push(i);
  }
  setNums(arrNumbers);
}, [number])
return (
  nums.map((num) => <NextIcon i={i} />)
)
}

export default Component;

Answer 1

[VladimirAsmo]

Если очень надо, то можно как то так:

const renderPageNumber = (number) => {
    const nextIcons = Array(number)
      .map((icon, id) => <NextIcon i={id + 1} key={?} />);
    return nextIcons;
  }

Но, блин, это ппц какое извращение передавать в компонет количество дочерних компонент и отрисовывать их в цикле. Перечитайте учебник, вы как то не совсем правильно начали знакомство с этой библиотекой.

Comments

[JordanBelford]

Мне необходимо сделать пагинацию. Получаю количество страниц с сервера, поэтому необходимо компоненту "page" отрисовать фиксированное количество раз. А кроме как через цикл for или while, не понимаю как можно еще сделать.

[deantek]

JordanBelford, по индексу попробуй

.map((item, i) => {
if (i === 3) {
// code
}
})