How to draw a component in a loop?

Question

Frontend

Hello everyone, you need to draw a specific number of times the component for this wrote the following function:

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

but the problem is that this function returns void, I can't write return before the component. How can this problem be solved?

Answer 1

If you really need it, you can do something like this:

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

But damn it, what a perversion to pass the number of child components to the component and draw them in a loop. Re-read the textbook, you somehow didn’t start your acquaintance with this library quite correctly.