Frontend Academy · Lección

Listas, keys y renderizado condicional

Renderice arrays de elementos con .map(), proporcione props key estables y renderice elementos condicionalmente con && y el operador ternario.

Listas, keys y renderizado condicional es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Renderizar listas con .map()

Renderice una lista dinámica llamando a .map() en un array y devolviendo JSX para cada elemento. React renderiza un array de elementos igual que un solo elemento.

const fruits = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {fruits.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

La prop key — por qué es importante

key es una prop especial de React que le ayuda a identificar qué elementos de una lista han cambiado, se han agregado o se han eliminado. Sin keys (o con keys inestables, como los índices), React puede producir actualizaciones incorrectas.

Keys buenas y malas

Keys buenas: identificadores únicos y estables de sus datos (por ejemplo, item.id). Keys malas: índices del array (los elementos pueden reordenarse) o valores aleatorios (cambian en cada renderizado).

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

Renderizar objetos

Mapee un array de objetos a componentes y desestructure el objeto para convertirlo en props.

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

Renderizado condicional con &&

Utilice el operador de cortocircuito && para incluir JSX de forma condicional. Si el lado izquierdo es falso, no se renderiza nada. Tenga cuidado con los números falsos: 0 se renderiza como '0'.

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

Renderizado condicional con ternario

Utilice el operador ternario para renderizar uno de dos elementos según una condición.

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

Renderizado condicional con una instrucción if

Para condiciones complejas, utilice una instrucción if antes de return. Devuelva un resultado anticipadamente para los estados de carga o error.

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Filtrar antes de mapear

Filtre el array antes de mapearlo para renderizar solo los elementos que coincidan. Es una solución limpia y fácil de leer.

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

Estado vacío

Gestione siempre el caso de un array vacío. Renderizar una lista vacía sin ninguna indicación resulta confuso; muestre en su lugar un mensaje útil para el estado vacío.

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

Portales de renderizado para listas

Las listas largas que deben aparecer en un nodo del DOM diferente, como un menú desplegable, pueden usar ReactDOM.createPortal. Sin embargo, la mayoría del renderizado de listas se realiza directamente dentro del árbol.

Listas virtualizadas para mejorar el rendimiento

Para listas muy largas, de más de 1.000 elementos, utilice una biblioteca de virtualización como react-window o @tanstack/react-virtual. Estas bibliotecas solo renderizan las filas visibles y evitan problemas de rendimiento del DOM.

Comprobación rápida

¿Cuándo es aceptable usar el índice del array como key en las listas de React?

Resumen: listas y renderizado condicional

Renderice listas con .map(). Añada siempre props key estables y únicos. Use && para elementos opcionales, pero tenga cuidado con 0. Use el operador ternario para elegir entre dos opciones. Use retornos anticipados para los estados de carga y error. Filtre antes de hacer el mapeo en las listas condicionales. Muestre un mensaje de estado vacío cuando los arrays estén vacíos. Virtualice las listas muy largas.

Preguntas frecuentes

¿La lección «Listas, keys y renderizado condicional» es gratis?

Sí — el texto completo de «Listas, keys y renderizado condicional» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Listas, keys y renderizado condicional»?

Renderice arrays de elementos con .map(), proporcione props key estables y renderice elementos condicionalmente con && y el operador ternario. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Listas, keys y renderizado condicional»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy