🔗 Rendering Lists – React Docs

✅ ¿Qué quiere enseñarte React en esta sección?

Cómo renderizar listas de elementos en JSX utilizando el método .map() y cómo asignar una key única a cada elemento renderizado.

🧠 Párrafo resumen:

“En React, para renderizar listas usás el método .map() sobre un array, devolviendo un JSX por cada ítem. Cada elemento renderizado debe tener una prop key única y estable, que ayuda a React a identificar y actualizar los elementos de forma eficiente.”

📌 React quiere que sepas sí o sí:

  1. Usás .map() para recorrer un array y devolver JSX 
const frutas = ["Manzana", "Banana", "Pera"];

return (
  <ul>
    {frutas.map((fruta) => (
      <li key={fruta}>{fruta}li>
    ))}
  ul>
);
  1. La prop key es obligatoria cuando renderizás listas > Debe ser un valor único y estable (idealmente un ID, no un índice). 
productos.map((p) => <li key={p.id}>{p.nombre}li>)
  1. La lista puede renderizarse directamente o guardarse en una variable previa 
const items = productos.map((p) => <li key={p.id}>{p.nombre}li>);
return <ul>{items}ul>;