Renderizar listas en React con map

Cuando construyes una aplicación como Airbnb, no muestras una sola propiedad: muestras muchas. Para lograrlo en React necesitas renderizar listas a partir de un array de datos, y aquí aprenderás a crear un archivo de datos mock y a transformarlo en componentes usando la función map. Es ideal para quien empieza en React y quiere un proyecto más ordenado y escalable.

Qué son los datos mock y por qué los usamos en React

Antes de mostrar una lista de propiedades, necesitas los datos bien organizados. Los datos mock son datos que simulan lo que más adelante podría venir desde una API o una base de datos, pero por ahora viven dentro del proyecto para que puedas enfocarte en React sin distracciones.

En este caso preparamos un archivo properties.js con un listado de seis propiedades distintas [00:35]. Ese archivo es nuestra data simulada, la fuente desde donde React va a leer la información.

¿Qué son los datos mock? Son datos de prueba que imitan la respuesta real de una API o base de datos. Te permiten desarrollar la interfaz sin depender de un backend todavía conectado.

Qué props contiene cada propiedad

Cada objeto del listado incluye varios valores. Antes teníamos solo cuatro props y sumamos dos más para tener una card más completa:

• Identificador (id): no se muestra en pantalla, pero React lo necesita para diferenciar cada elemento.
• Título: el nombre de la propiedad.
• Ubicación: dónde se encuentra.
• Precio: cuánto cuesta.
• Imagen: la foto de la propiedad.
• Tipo: apartamento, casa, loft, cabaña, estudio o villa [01:30].

El tipo de propiedad es una prop nueva, así que tuvimos que modificar el PropertyCard para poder mostrarla dentro de la card.

Cómo renderizar un array de propiedades con el método map

El archivo donde ocurre la magia es PropertyList. Ahí migramos las tres propiedades escritas a mano de la clase anterior para que ahora rendericen todo el listado de properties.

El primer paso es importar el archivo de propiedades con la data simulada. Luego, en lugar de escribir cada card de forma manual, usamos el método map para recorrer el array.

jsx import { properties } from "./properties";

function PropertyList() { return ( <div> {properties.map((property) => ( <PropertyCard key={property.id} title={property.title} location={property.location} price={property.price} image={property.image} type={property.type} /> ))} </div> ); }

El array es una lista de objetos, y a cada objeto le asignamos un nombre: en este caso property. Después, cada prop del PropertyCard se llama con el punto: property.id, property.title, y así sucesivamente hasta traer todos los valores que necesitamos.

Al guardar, el listado pasa a mostrar las seis propiedades leyéndolas directamente desde el archivo mock [02:50]. Cambiamos data estática por data dinámica sin escribir cada card a mano.

¿Para qué sirve el método map en React? Recorre un array y devuelve un nuevo elemento por cada ítem. En React lo usas para convertir una lista de datos en una lista de componentes de forma automática.

Por qué React necesita la prop key en cada elemento

Hay un detalle clave: cada elemento que renderizas dentro de un map tiene que estar identificado como individual. Por eso agregamos un id a cada objeto de properties.

Ese identificador se pasa a través de la prop key, una prop nativa de React para los elementos generados con map [03:40]. Gracias a ella, React entiende que cada PropertyCard es un objeto distinto y puede manejarlos de forma eficiente.

¿Por qué React pide la prop key? Porque necesita distinguir cada elemento de una lista para actualizar solo lo que cambia. Sin una key única, React puede renderizar de forma incorrecta o mostrar advertencias.

Qué tan escalable es tener los datos en un archivo aparte

Y aquí viene lo interesante: si quieres agregar una propiedad más, ya no tocas los componentes. Solo vas al archivo properties.js, copias un objeto, modificas un valor como el título (por ejemplo, "villa con piscina dos") y listo, aparece un séptimo ítem [04:30].

Esto vuelve tu aplicación mucho más flexible por varias razones:

• Mantienes el proyecto ordenado al separar datos de componentes.
• Reduces el código repetido dentro de tus componentes.
• Agregar propiedades nuevas solo requiere actualizar el array.

Al mover los datos de los componentes a un archivo propio, tu listado se genera desde datos y no desde componentes escritos manualmente.

Como ves, usamos términos de JavaScript como array y la función map. ¿Te suenan familiares o extraños? Puedes reforzar estos conceptos con el curso de fundamentos de JavaScript disponible en Platzi. ¿Ya intentaste agregar tu propia propiedad al array? Cuéntanos cómo te fue en los comentarios.