How to loop React Elements for a specific amount of times?-CodePudding

I am trying to make a looper component so that I can loop any of its children for a specific amount of time. How can I do that?

// Looper

function Looper({ children, array }) {
    return (
      <div>
        {array.map((item) => (
          <div key={item}>{children}</div>
        ))}
      </div>
    );
  }
  

// It works, but it needs a dummy array that I don't want.

<Looper array={[1, 2, 3, 4, 5]}>
    <span>Hello Guys..</span>
</Looper>

CodePudding user response：

You can create an array of incrementing numbers on the fly using [...Array(times).keys()], like so:

// Looper

function Looper({ children, times }) {
    const keys = [...Array(times).keys()];
    return (
      <div>
        {keys.map((item) => (
          <div key={item}>{children}</div>
        ))}
      </div>
    );
  }
  
<Looper times={5}>
    <span>Hello Guys..</span>
</Looper>

CodePudding user response：

replace your map function with a for loop and pass a count i:e number of times you want the looper to render, and use that index as a key for the child divs then push them into an array. Finally, return that array of child divs. Check out this link if you want to go with this approach Loop inside React JSX