0

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>
Code Lover
  • 33
  • 1
  • 5

2 Answers2

4

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>
gunwin
  • 4,578
  • 5
  • 37
  • 59
  • 2
    You can mix up creating your array with other ways as well: https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n But this is the solution! :) – Lars Flieger Dec 03 '21 at 11:39
0

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

ImranMalik_1
  • 11
  • 2