El bucle for en React

Cuando un array contiene productos, usuarios u otros registros, React puede renderizar un elemento o componente por cada elemento. Lo habitual es usar .map() para transformar cada registro en un elemento; elige un bucle for de JavaScript cuando sus pasos explícitos hagan más claro el trabajo. Ambos métodos producen un array de elementos que React puede renderizar.

Renderizar listas en React con .map()

Empieza con los registros que quieres mostrar. Este ejemplo independiente de JavaScript convierte cada producto en una etiqueta; no usa React ni monta un componente. La salida siguiente es el resultado observado únicamente para este ejemplo de JavaScript.

const products = [
  { id: "mug", name: "Ceramic mug", price: 12 },
  { id: "notebook", name: "Notebook", price: 8 },
];

const labels = products.map((product) => `${product.name}: $${product.price}`);
console.log(labels.join("\n"));

Ceramic mug: $12
Notebook: $8

Para crear JSX, aplica map a los mismos datos y genera elementos: products.map((product) => <li key={product.id}>{product.name}: ${product.price}</li>). Coloca el array devuelto dentro del marcado donde deba aparecer la lista; por ejemplo: <ul>{products.map((product) => <li key={product.id}>{product.name}</li>)}</ul>. React renderiza el array directamente, así que añade un contenedor solo cuando la estructura de la página lo requiera. Estos fragmentos JSX ilustran el renderizado de React y no están cubiertos por las pruebas de ejecución de JavaScript anteriores.

También puedes transformar cada registro en un componente reutilizable. Define function ProductCard(props) { return <li>{props.name}: ${props.price}</li>; } y luego renderízalo con products.map((product) => <ProductCard key={product.id} name={product.name} price={product.price} />). El componente hijo recibe name y price en su objeto props y lee esos valores para construir su salida. Otra opción es pasar el registro completo con product={product} y leer props.product.name y props.product.price dentro del componente. Elige una interfaz que deje claros los datos que necesita el componente.

Cada elemento hermano generado por el mapeo necesita una key que sea única entre sus hermanos y estable para el mismo registro; suele usarse un ID de los datos. Evita usar el índice del array cuando los elementos puedan insertarse, eliminarse o cambiar de orden: después de un cambio, un índice puede señalar otro registro y hacer que React asocie el estado del componente al elemento equivocado. React usa key para relacionar los elementos de la lista durante las actualizaciones; no se pasa al componente hijo como prop. Consulta la guía de React para renderizar listas para obtener más información sobre las claves y el renderizado de listas.

Usar un bucle for de JavaScript

Un bucle for de JavaScript resulta útil cuando quieres crear elementos mediante pasos explícitos. En un componente, inicializa un array antes de return, añade un elemento con su clave por cada producto y, después, incluye el array en el marcado devuelto. Este es un componente completo, expresado línea por línea; usa los datos products declarados anteriormente:

function ProductList() {
const items = [];
for (let i = 0; i < products.length; i += 1) {
const product = products[i];
items.push(<li key={product.id}>{product.name}: ${product.price}</li>);
}
return <ul>{items}</ul>;
}

Este componente es una ilustración de React/JSX y no forma parte del ejemplo de JavaScript ejecutado. El bucle se ejecuta mientras el componente prepara el resultado; no se puede colocar una instrucción directamente dentro de JSX. Para una transformación sencilla de uno a uno, .map() suele ser más breve y permite ver de un vistazo la relación entre cada registro y su elemento. Un bucle puede resultar más claro si crear el resultado requiere varias instrucciones o pasos condicionales. Ambos patrones deben usar claves estables en los elementos que devuelven.

Usar una función invocada inmediatamente

Una expresión de función invocada inmediatamente (IIFE) permite incluir instrucciones dentro de una expresión JSX, pero es una opción poco habitual para renderizar una lista. Por ejemplo, la expresión JSX {(() => { const items = []; for (let i = 0; i < products.length; i += 1) { const product = products[i]; items.push(<li key={product.id}>{product.name}</li>); } return items; })()} crea y devuelve un array de inmediato. Esto ilustra la sintaxis; no es un ejemplo de React ejecutado. Mantén el valor devuelto en la misma línea que return o colócalo entre paréntesis: un salto de línea justo después de return puede hacer que JavaScript devuelva undefined por la inserción automática de punto y coma. Para las listas habituales, .map() o un bucle antes del return del componente son más fáciles de leer y mantener.