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>
Advertisement
Answer
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>