Misión 1 · Lección 4

Listas y Renderizado Condicional en React

Objetivos

• Aprender a recorrer arreglos con map() para renderizar listas.
• Entender la importancia de las keys en los elementos de lista.
• Usar condicionales para mostrar u ocultar contenido dinámicamente.

Renderizado de Listas

En React, puedes mostrar listas de elementos usando el método map() de los arreglos.

const frutas = ["🍎", "🍌", "🍊"];

export default function ListaFrutas() {
  return (
    <ul>
      {frutas.map((fruta, index) => (
        <li key={index}>{fruta}</li>
      ))}
    </ul>
  );
}

Cada elemento renderizado debe tener una propiedad key única.

Importancia de las Keys

• Las keys ayudan a React a identificar qué elementos cambian, se agregan o eliminan.
• Mejoran el rendimiento y evitan errores de renderizado.
• Siempre deben ser únicas dentro del mismo nivel de lista.

{productos.map((item) => (
  <li key={item.id}>{item.nombre}</li>
))}

Renderizado Condicional

Puedes mostrar elementos de forma condicional usando operadores lógicos:

export default function Mensaje({ isLogged }) {
  return (
    <div>
      {isLogged ? (
        <h3>Bienvenido de nuevo 👋</h3>
      ) : (
        <h3>Por favor, inicia sesión</h3>
      )}
    </div>
  );
}

También se puede usar el operador && para mostrar algo solo si una condición es verdadera.

{tareas.length > 0 && <p>Tienes {tareas.length} tareas pendientes</p>}

Combinar Listas y Condicionales

const tareas = ["Estudiar", "Leer", "Practicar React"];

export default function ListaTareas() {
  return (
    <div>
      {tareas.length === 0 ? (
        <p>No hay tareas pendientes.</p>
      ) : (
        <ul>
          {tareas.map((t, i) => (
            <li key={i}>{t}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

🔹 Este patrón es muy común en React: mostrar listas o mensajes alternativos dependiendo del estado.

Buenas Prácticas

• Evita usar el índice del arreglo (index) como key, si puedes usar un ID único.
• Usa fragmentos <></> si no necesitas un contenedor adicional.
• Mantén el JSX legible separando las funciones de renderizado complejas.

Ejercicio Guiado 🧠

1. Crea un componente <ListaUsuarios /> que reciba una lista de usuarios por props y los renderice en una lista.
2. Agrega una condición que muestre “No hay usuarios registrados” si la lista está vacía.
3. Agrega un botón “Agregar Usuario” que añada uno nuevo al estado.

Resumen de la Lección

• map() permite renderizar listas de elementos.
• Las keys únicas son necesarias para un renderizado eficiente.
• El renderizado condicional permite mostrar contenido dinámico.
• Combinar listas y condicionales crea interfaces interactivas y limpias.

🚀 Con esto ya puedes mostrar datos dinámicos en React de forma profesional.