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?
JavaScript
x
19
19
1
// Looper
2
3
function Looper({ children, array }) {
4
return (
5
<div>
6
{array.map((item) => (
7
<div key={item}>{children}</div>
8
))}
9
</div>
10
);
11
}
12
13
14
// It works, but it needs a dummy array that I don't want.
15
16
<Looper array={[1, 2, 3, 4, 5]}>
17
<span>Hello Guys..</span>
18
</Looper>
19
Advertisement
Answer
You can create an array of incrementing numbers on the fly using [...Array(times).keys()]
, like so:
JavaScript
1
17
17
1
// Looper
2
3
function Looper({ children, times }) {
4
const keys = [Array(times).keys()];
5
return (
6
<div>
7
{keys.map((item) => (
8
<div key={item}>{children}</div>
9
))}
10
</div>
11
);
12
}
13
14
<Looper times={5}>
15
<span>Hello Guys..</span>
16
</Looper>
17