Renderizado condicional y listas

Parte del curso de React

Casi todas las pantallas que has usado en tu vida muestran una cosa u otra según alguna condición: un aviso de «tienes mensajes nuevos» que solo aparece cuando hay mensajes nuevos, un indicador de carga que solo se ve mientras algo está cargando. Y casi todas las pantallas muestran más de una cosa del mismo tipo: una lista de pedidos, una cuadrícula de productos, un muro de publicaciones.

Imagina a un portero delante de una sala. Antes de dejar pasar a nadie comprueba una sola cosa. Si la comprobación pasa, la persona entra. Si falla, no ocurre absolutamente nada: ni explicación, ni sustituto, solo silencio y una puerta cerrada. Ese es exactamente el trabajo de && (el Y lógico) dentro de una expresión JSX: cuando escribes condition && <SomeElement />, React renderiza <SomeElement /> solo si condition...