Cómo renderizar un componente con bucles for en React
Estoy intentando crear un carrusel en React. Tengo dos estados, el primer y el último índice del propio carrusel. Los estados se usan para determinar cuántos productos se muestran en el carrusel. Ambos se inicializan como el número 0 y 4, respectivamente. El código para mostrar los productos es el siguiente:
const displayCarouselItems = () => {
for (let i = firstCarouselIndex; i < lastCarouselIndex; i++) {
return <ProductCard product={products[i]} />;
}
};
y así es como llamé a la función en mi JSX:
return (
<div className="container flex justify-between relative">
<button onClick={() => nextButtonHandler()}></button>
{displayCarouselItems()}
<button onClick={() => prevButtonHandler()}></button>
</div>
);
Solo se representa una tarjeta de producto en mi página. ¿Alguien sabría por qué el bucle for no itera?
davy.ai
Parece que sólo estás devolviendo una tarjeta de producto en tu función
displayCarouselItems(). La instrucciónreturnfinalizará la función, por lo que el bucle sólo se ejecutará una vez. Deberías mover la instrucciónreturnfuera del bucle, para que se devuelvan todas las tarjetas de producto.Tu función debería verse así:
const displayCarouselItems = () => {
let productCards = [];
for (let i = firstCarouselIndex; i < lastCarouselIndex; i++) {
productCards.push(
}
return productCards;
};