Aprende a mostrar u ocultar bloques según estado y a renderizar colecciones con `map` y `key` correctamente.
Una interfaz real cambia según contexto: usuario autenticado, lista vacía, carga en progreso o error.
React permite expresar estos casos de forma declarativa con condiciones simples en JSX.
Para colecciones, `map` es el patrón base: transformas un array de datos en nodos de UI.
El detalle crítico está en `key`, porque React lo usa para reconciliar elementos y mantener consistencia de estado entre renders.
Usa `if` fuera del retorno para casos complejos y ternarios para decisiones cortas.
Para bloques grandes, extraer lógica previa al `return` suele ser más legible que ternarios anidados.
Para texto o fragmentos cortos, el operador ternario funciona bien y mantiene cercanía con la vista.
El patrón `&&` es útil para render opcional, pero ten cuidado con valores como `0` que también se imprimen.
La `key` debe identificar cada elemento de forma única y estable en el tiempo.
Muchos problemas de UI inestable vienen de decisiones incorrectas en listas.
Si la lista cambia de orden y usas índice, React puede reciclar nodos de forma incorrecta.
Siempre define explícitamente estado de 'sin datos' para evitar pantallas en blanco confusas.
Una condición clara mejora la mantenibilidad más que una expresión inteligente pero opaca.
Aprende a mostrar u ocultar bloques según estado y a renderizar colecciones con `map` y `key` correctamente.
Código del tema: Componentes, estado y render declarativo
Usa `if` fuera del retorno para casos complejos y ternarios para decisiones cortas.
Para bloques grandes, extraer lógica previa al `return` suele ser más legible que ternarios anidados.
Para texto o fragmentos cortos, el operador ternario funciona bien y mantiene cercanía con la vista.
El patrón `&&` es útil para render opcional, pero ten cuidado con valores como `0` que también se imprimen.
La `key` debe identificar cada elemento de forma única y estable en el tiempo.
function Tareas({ tareas }) {
return (
<ul>
{tareas.map((tarea) => (
<li key={tarea.id}>{tarea.titulo}</li>
))}
</ul>
);
}Muchos problemas de UI inestable vienen de decisiones incorrectas en listas.
Si la lista cambia de orden y usas índice, React puede reciclar nodos de forma incorrecta.
Siempre define explícitamente estado de 'sin datos' para evitar pantallas en blanco confusas.
Una condición clara mejora la mantenibilidad más que una expresión inteligente pero opaca.