Cómo filtrar propiedades con useState en React

¿Cómo hacer que un buscador en React realmente filtre resultados? En esta guía aprenderás a implementar una búsqueda funcional por ciudad, tipo de alojamiento o título usando el hook useState y comunicación por props. Es ideal para quienes construyen su primera app en React y ya tienen un input capturando texto, pero necesitan que ese valor haga algo real.

Hasta ahora teníamos un listado de propiedades que se leía desde un archivo estático y se mostraba tal cual venía. El SearchBar ya manejaba estado, pero solo servía para cambiar el título y el input de ciudad. No filtraba nada. El objetivo es conectar ese input con la lista para que el resultado cambie según lo que escribe el usuario.

Por qué necesitamos estado en el componente App

El primer paso es mover la búsqueda a un lugar donde ambos componentes puedan comunicarse. Ese lugar es App.js, el componente que lista las propiedades.

Para empezar a trabajar con estado, importamos el hook useState [00:38]. Con él creamos una variable llamada search y su función actualizadora setSearch. El valor por defecto es una cadena vacía, porque al inicio nadie ha buscado nada todavía.

¿Qué hace useState en React? Crea una variable de estado y una función para actualizarla. Cuando ese valor cambia, React vuelve a renderizar el componente con la nueva información.

La idea es simple: search guarda el texto que el usuario busca, y ese texto será la base para decidir qué propiedades se muestran.

Cómo funciona la función que filtra las propiedades

Aquí viene lo interesante. En lugar de mostrar todas las propiedades, definimos una función filterProperties que toma la lista completa desde el archivo de data y la recorre item por item, llamando a cada uno property [01:20].

Dentro de esa función pasan varias cosas clave:

• Convertimos el texto de search a minúsculas para que la coincidencia sea más precisa y el match sea perfecto.
• Verificamos si el título de la propiedad, también en minúsculas, incluye el texto buscado.
• Verificamos lo mismo con la ubicación de la propiedad.
• Y repetimos la comprobación con el tipo de propiedad.

Después de definir ese filtro, reemplazamos lo que le mandamos al componente PropertyList. En vez de pasarle las propiedades completas, le pasamos las filteredProperties [02:04]. Con eso, la lista ya sabe qué mostrar.

¿Por qué convertir el texto a minúsculas al buscar? Para que "Bogotá", "bogota" o "BOGOTA" coincidan igual. Sin normalizar el texto, una mayúscula rompería la coincidencia y el filtro no encontraría nada.

Cómo pasar la búsqueda entre componentes con props

Falta algo importante: App.js está seteando una búsqueda que todavía no existe, porque quien captura el texto es el SearchBar. La comunicación se resuelve con props.

Desde App le pasamos al SearchBar una prop llamada onSearch con el valor de setSearch [02:30]. Así el hijo puede avisarle al padre qué escribió el usuario.

En el SearchBar recibimos esa prop y la usamos dentro del submit. Antes, el submit solo prevenía el evento por defecto y actualizaba la ciudad buscada. Ahora hacemos dos cambios:

1. Aplicamos city.trim() para limpiar espacios y permitir reemplazar una búsqueda anterior por una nueva.
2. Llamamos a onSearch con ese mismo valor, para que el estado en App se actualice.

De esta forma, cuando el usuario escribe y da clic en buscar, el SearchBar cambia su propio estado y también le envía el valor al padre.

Qué pasa al probar el buscador en el navegador

Llega el momento de verlo funcionar. Escribimos "Bogotá", damos clic en buscar y aparece el filtro: una sola propiedad hace match con Bogotá [03:30]. Como la búsqueda revisa título, ciudad y tipo, la coincidencia se da por la ciudad.

Pero hay un detalle. Al borrar el texto, el estado del city y el de la ciudad buscada cambian, pero el filtro no se limpiaba. ¿La razón? La función de búsqueda solo limpiaba esos dos valores, no el estado que controla el filtro.

La solución es hacer que al limpiar, onSearch también reciba un valor vacío. Después de ese ajuste, refrescamos, buscamos "Bogotá" sin acento para lograr una coincidencia exacta, y al borrar vuelven todas las propiedades [04:30]. El estado se maneja desde App, pero vive en conexión con el SearchBar.

Con esto, el listado se actualiza en tiempo real según lo que escribe el usuario, y la app empieza a sentirse como una herramienta funcional de verdad.

El siguiente paso natural es profundizar en el patrón de los componentes controlados, donde el valor del input está totalmente gobernado por el estado de React. ¿Ya intentaste aplicar este filtro en tu propio proyecto? Cuéntanos cómo te fue en los comentarios.