React - Using a for-loop inside JSX - reactjs

Question

In the following React component:
import React, { useState, useEffect } from 'react';
const List = () => {
const docLimit = 2;
const maxColNumber = 6;
const [cards, setCards] = useState([]);
const [beginAfter, setBeginAfter] = useState(0);
return (
<>
<div className='collection'>
<div className='collection__set' onClick={() => setBeginAfter(0)}>
First 2 data
</div>
<div
className='collection__set'
onClick={() => setBeginAfter(docLimit * 1)}
>
Next 2 data
</div>
<div
className='collection__set'
onClick={() => setBeginAfter(docLimit * 2)}
>
Next 2 data
</div>
<div
className='collection__set'
onClick={() => setBeginAfter(docLimit * 3)}
>
Next 2 data
</div>
</div>
<ul className='list'>
{cards.map((card) => (
<li key={card.id} className='list__item'>
<DeleteCard card={card} />
</li>
))}
</ul>
</>
);
};
export default List;
I want to use a loop to output this part:
<div className='collection'>
<div className='collection__set' onClick={() => setBeginAfter(0)}>
First 2 data
</div>
<div
className='collection__set'
onClick={() => setBeginAfter(docLimit * 1)}
>
Next 2 data
</div>
<div
className='collection__set'
onClick={() => setBeginAfter(docLimit * 2)}
>
Next 2 data
</div>
<div
className='collection__set'
onClick={() => setBeginAfter(docLimit * 3)}
>
Next 2 data
</div>
</div>
But it doesn't matter what I try, it doesn't work.
I tried this:
const renderMenu = () => {
const menu = [];
for (var i = 0; i < maxColNumber; i++) {
menu.push(
<div
className='collection__set'
onClick={setBeginAfter(docLimit * i)}
>
Next 2 data
</div>
);
}
return (
<div className='collection'>menu</div>
)
};
But it didn't work.
Can someone please help me with this?

Answer 1

Insted of using for, you can use map.
Try this method:
const Menu = () => Array(maxColNumber / 2).fill().map((_, i) => {
const onClick = () => setBeginAfter(docLimit * i)
return (
<div className='collection'>
<div
className='collection__set'
onClick={onClick}
>
Next 2 data
</div>
</div>
)
})
// later in your code , just add the tag
<Menu />