MÓDULO 2: REACT

Listas y Keys

En React es muy común mostrar listas de datos (enemigos, items, jugadores, misiones, etc.). Para renderizar listas usamos .map(), pero siempre debemos agregar una key única a cada elemento.

---

1. Renderizar una Lista Básica con .map()

function ListaEnemigos() {
  const enemigos = [
    "Goblin",
    "Orco",
    "Esqueleto",
    "Dragón"
  ];

  return (
    <ul>
      {enemigos.map((enemigo, index) => (
        <li key={index}>{enemigo}</li>
      ))}
    </ul>
  );
}

---

2. Usando una Key Única (Mejor práctica)

function Inventario() {
  const items = [
    { id: 1, nombre: "Espada Legendaria", rareza: "Épica" },
    { id: 2, nombre: "Poción de Vida",     rareza: "Común" },
    { id: 3, nombre: "Anillo de Fuego",   rareza: "Rara" },
  ];

  return (
    <div>
      <h3>Inventario</h3>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.nombre} — <strong>{item.rareza}</strong>
          </li>
        ))}
      </ul>
    </div>
  );
}

---

3. ¿Por qué son importantes las Keys?

---

4. Ejemplo Práctico: Lista de Habilidades

function HabilidadesJugador() {
  const habilidades = [
    { id: "h1", nombre: "Golpe Fuerte", daño: 45, tipo: "Físico" },
    { id: "h2", nombre: "Bola de Fuego", daño: 60, tipo: "Mágico" },
    { id: "h3", nombre: "Curación Rápida", daño: 0, tipo: "Soporte" },
  ];

  return (
    <div className="habilidades">
      {habilidades.map(habilidad => (
        <div key={habilidad.id} className="habilidad-card">
          <h4>{habilidad.nombre}</h4>
          <p>Daño: {habilidad.daño} | Tipo: {habilidad.tipo}</p>
        </div>
      ))}
    </div>
  );
}

---

5. Reglas de las Keys