export default function App() {
  const tecnologias = ["HTML", "CSS", "JavaScript", "React", "Node.js"];

  return (
    <div>
      <h1>Mis tecnologías</h1>
      <ul>
        {/* Usa .map() para renderizar cada tecnología como un <li> */}
        {/* Recuerda: cada <li> necesita una prop key única */}
      </ul>
    </div>
  );
}

Renderizado de listas

El problema: repetir elementos

Imagina que tienes un array de tecnologías y quieres mostrar cada una en una lista. En HTML tendrías que escribir cada <li> a mano. Si el array cambia, tienes que actualizar el HTML manualmente.

React tiene una solución mucho mejor: .map().

.map() — tu mejor amigo en React

Ya conoces .map() de JavaScript: transforma cada elemento de un array en otra cosa. En React, lo usamos para transformar datos en elementos JSX:

¿Qué pasa aquí?

1. frutas.map(...) recorre el array
2. Por cada fruta, devuelve un <li> con el nombre
3. React renderiza todos los <li> resultantes dentro del <ul>

El resultado es una lista completa, generada automáticamente desde los datos.

La prop key: identidad de cada elemento

Si ejecutas el código anterior, verás una advertencia en la consola:

Warning: Each child in a list should have a unique "key" prop.

React necesita una forma de identificar cada elemento de la lista para poder actualizarla eficientemente. Para eso existe la prop key:

La key debe ser:

• Única entre elementos hermanos
• Estable (no cambia entre renders)
• Predecible (no aleatoria)

¿Qué usar como key?

Lo ideal es un id único de tus datos:

Si no tienes un id, puedes usar el string mismo si es único. Usa el índice (index) solo como último recurso — puede causar bugs si la lista se reordena.

¿Por qué importan las keys?

Imagina que tienes una lista de 100 elementos y solo cambia uno. Sin keys, React tendría que comparar todos los elementos uno a uno. Con keys, React sabe exactamente cuál cambió y solo actualiza ese.

Es como tener nombres en una lista de clase vs tener asientos numerados. Con asientos numerados, sabes inmediatamente quién falta.

Patrones comunes

Lista de objetos con componente

NUNCA uses .forEach() para renderizar

Tu desafío 🚀

Tienes un array de tecnologías. Tu misión:

1. Usa .map() dentro del <ul> para renderizar cada tecnología como un <li>
2. Añade una key única a cada <li>
3. Verifica que aparecen al menos 3 elementos en el preview

Renderizar listas es algo que harás constantemente en React. Cada feed de noticias, cada carrito de compras, cada tabla de datos — todo son listas renderizadas con .map().