Renderizado condicional en React para datos incompletos

El renderizado condicional en React te permite cambiar la apariencia de un componente según los datos que reciba, algo esencial cuando una búsqueda no devuelve resultados o un dato llega incompleto. Si estás aprendiendo a construir interfaces reales con React, aquí verás cómo manejar estados vacíos y pequeñas variaciones visuales sin que se te rompa el diseño.

La idea de fondo es sencilla: no siempre vas a tener propiedades para mostrar. A veces el listado viene vacío, a veces falta un valor puntual. En lugar de dejar una pantalla en blanco o un espacio raro en el diseño, defines escenarios alternativos que mejoren la experiencia del usuario.

Por qué mover la data del componente hijo al App

En el punto de partida, el listado se leía directamente dentro del componente PropertyList desde el archivo properties.js. El primer cambio consiste en mover esa lectura al App.js para tener la información de manera más global [00:38].

El proceso es directo:

• Migras el import de la data hacia App.
• Le pasas las propiedades a PropertyList como una prop.
• Ajustas PropertyList para que lea esas propiedades desde la prop y no desde el archivo original.

Al principio no verás ningún cambio visual, porque el componente sigue recibiendo las mismas propiedades. Pero si apagas la lectura directa del archivo, el componente empieza a fallar, y ahí confirmas que ahora la data viaja desde App hacia el hijo [01:40].

¿Qué es una prop en React? Es un valor que un componente padre le pasa a un componente hijo. En este caso, App le entrega las propiedades a PropertyList para que las muestre.

Este movimiento es lo que después te habilita a agregar un estado condicional cuando la data venga incompleta.

Cómo mostrar un estado vacío cuando no hay propiedades

Aquí viene lo interesante. Si en App.jsx cambias las properties por un array vacío y guardas, solo se muestra el título de los alojamientos disponibles y nada más [02:35]. Una pantalla casi en blanco no le dice nada al usuario.

La solución es agregar un condicional antes del renderizado principal. Si la cantidad de propiedades es igual a cero, retornas un bloque de código alternativo [03:15].

Ese bloque:

• Es una sección que comparte el mismo nombre de clase que el contenido completo.
• Repite el título de alojamientos disponibles para mantener consistencia.
• Renderiza el mensaje "no encontramos alojamientos con esos criterios".

Así, en vez de un error o una pantalla vacía, le explicas al usuario qué está pasando. Y este mismo mensaje sirve no solo cuando no hay data, sino también cuando un filtro no arroja ningún resultado, algo que se usará más adelante [04:00].

¿Por qué mostrar un estado vacío en lugar de una pantalla en blanco? Porque mejora la experiencia del usuario: le comunicas que no hay contenido disponible o que la búsqueda no tuvo coincidencias, en vez de dejarlo confundido frente a un espacio vacío.

Como detalle de limpieza, se borra una línea que había quedado comentada en PropertyList, porque ya no hace falta.

Cómo evitar que un dato faltante rompa el diseño

El renderizado condicional no solo aplica a listas vacías. También sirve para valores puntuales que pueden faltar en un objeto.

En el listado se agregó el type, que estaba oculto porque la card aún no lo mostraba. Al pasarlo como prop y renderizarlo, aparece un problema: si una propiedad no tiene ese valor de tipo, se genera un espacio vacío que desordena el diseño [05:00]. La card tiene título, ubicación, tipo y precio, y al faltar uno, todo se descuadra frente a las demás cards.

La alternativa es validar el dato con un valor condicional. Si no tiene tipo, muestras un texto como "tipo no especificado" [05:30]. Con eso mantienes la uniformidad: no queda ningún hueco extraño y todas las cards se ven igual.

¿Cuándo debo usar renderizado condicional en React? Siempre que un dato pueda no llegar. Si validas su ausencia y defines una alternativa visual, evitas que se rompa el diseño o la aplicación.

Estos son ejemplos mínimos, pero la lógica se repite en cualquier aplicación real: valida que el dato exista y ten siempre un plan B para mostrarlo.

Qué habilidades y conceptos practicas aquí

Estos son los puntos técnicos que trabajas a lo largo de la clase:

• Renderizado condicional: mostrar interfaces distintas según los datos disponibles [00:15].
• Paso de datos por props: migrar la lectura de la data al App y entregarla al hijo PropertyList [00:38].
• Manejo de estados vacíos: retornar un mensaje cuando el array de propiedades es igual a cero [03:15].
• Validación de datos incompletos: mostrar "tipo no especificado" cuando falta un valor [05:30].

Un concepto que se menciona como estado alternativo es el loading, útil cuando la información todavía se está cargando y quieres avisarle al usuario que espere [02:55].

El siguiente paso es manejar interacción con estado local usando useState, uno de los hooks más importantes de React. ¿Ya tienes en mente qué otro dato de tus cards podrías validar para que nunca rompa el diseño? Cuéntamelo en los comentarios.