How to render component with for loops in react - reactjs

Question

I'm trying to create a carousel in react. I have two states, the first and last index of the carousel itself. The states is used to determine how many products are displayed in the carousel. Both are initialized as the number 0 and 4, respectively. The code for displaying the products are as follows:
const displayCarouselItems = () => {
for (let i = firstCarouselIndex; i < lastCarouselIndex; i++) {
return <ProductCard product={products[i]} />;
}
};
and here is how I called the function in my JSX:
return (
<div className="container flex justify-between relative">
<button onClick={() => nextButtonHandler()}></button>
{displayCarouselItems()}
<button onClick={() => prevButtonHandler()}></button>
</div>
);
It only renders one product card in my page. Would anyone know why the for loop doesn't iterate?

Answer 1

It only shows one component because once you return from the displayCarouselItems function, it's over, no more looping
You might want to return an array of elements, like this:
const displayCarouselItems = () => {
const renderValue = []
for (let i = firstCarouselIndex; i < lastCarouselIndex; i++) {
renderValue.push(<ProductCard product={products[i]} />)
}
return renderValue
};
Then it would be better with a key
// Use index as key
renderValue.push(<ProductCard product={products[i]} key={i} />)
// Or even better, an id, which avoid issues with rendering
// if the sequence of the items change
renderValue.push(<ProductCard product={products[i]} key={products[i].id} />)
That said, I think a more declarative pattern would be to use map over your products collection, for example in a pure function like the following:
const renderCarouselItems = products =>
products.map(p => (
<ProductCard key={p.id} product={p} />
));
Which, can as well be used directly in the markup unless you need it somewhere else:
return (
<div className="container flex justify-between relative">
<button onClick={() => nextButtonHandler()}></button>
{products.map(p => (
<ProductCard key={p.id} product={p} />
))}
<button onClick={() => prevButtonHandler()}></button>
</div>