Filtrar propiedades en React con useState y props

Aprender a filtrar propiedades en React con useState y props es el paso que convierte una lista estática en una aplicación funcional. Aquí conectamos un buscador con un listado para que los resultados cambien según lo que escribe el usuario, ideal si estás construyendo tu primera búsqueda dinámica.

Hasta este punto teníamos un input que guardaba lo que escribía el usuario, pero ese valor no hacía nada útil. Ahora lo vamos a aprovechar para filtrar propiedades por ciudad, tipo de alojamiento o título. Y aquí viene lo interesante: con pocos cambios el proyecto empieza a sentirse como una app de verdad.

Por qué necesitamos estado en el componente App

En App.js listábamos las propiedades leyéndolas desde un archivo estático y las mostrábamos tal cual venían [00:12]. El componente SearchBar era el único que manejaba estado, pero solo servía para cambiar el título y el input de ciudad, sin filtrar nada real [00:35].

Para que la búsqueda funcione, el primer paso es llevar el estado al lugar correcto. Importamos el hook useState dentro de App y creamos un estado llamado search con su función setSearch, iniciando con un valor vacío [01:07].

¿Qué hace useState en React? Es un hook que te permite guardar un valor que puede cambiar con el tiempo y que, al cambiar, vuelve a renderizar el componente. Aquí guarda el texto de búsqueda del usuario.

jsx import { useState } from "react";

const [search, setSearch] = useState("");

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

El listado no debe mostrar todas las propiedades, sino solo las que coinciden con la búsqueda. Para eso definimos filteredProperties, que toma los datos del archivo y filtra cada elemento, al que llamamos property [01:36].

La clave está en normalizar el texto. Convertimos lo que viene por search a minúsculas para que el match sea más eficaz, sin importar cómo escriba el usuario [01:55]. Luego revisamos tres condiciones:

• Que el título de la propiedad en minúscula incluya el texto buscado.
• Que la ubicación o ciudad en minúscula incluya el texto buscado.
• Que el tipo de propiedad en minúscula incluya el texto buscado.

Con esa validación lista, cambiamos lo que le pasamos al componente PropertyList: en lugar de mandarle las properties completas, le mandamos las filteredProperties [02:22].

jsx const filteredProperties = properties.filter((property) => { const text = search.toLowerCase(); return ( property.title.toLowerCase().includes(text) || property.location.toLowerCase().includes(text) || property.type.toLowerCase().includes(text) ); });

Cómo conectar App y SearchBar con props

Falta algo importante: quién dispara esa búsqueda. Ese trabajo lo hace el SearchBar. Le pasamos una prop llamada onSearch con el valor de setSearch, para que el hijo pueda actualizar el estado del padre [02:50].

¿Para qué sirve pasar una función como prop? Permite que un componente hijo actualice el estado del componente padre. Aquí SearchBar recibe onSearch y la usa para enviar el texto buscado hacia App.

En SearchBar recibimos esa prop onSearch. La estructura de abajo sigue igual que en la clase anterior, con dos estados: el de la ciudad y el de la ciudad buscada [03:30].

Qué cambios hacer en el submit del buscador

El submit prevenía el evento por default y cambiaba la ciudad buscada. Ahora le agregamos un par de cosas. La siguiente ciudad buscada pasa a ser city.trim, porque puedes hacer una búsqueda y luego otra que reemplace la anterior [04:05].

Ese mismo valor se lo pasamos a onSearch, que recibimos vía props, y ese es el dato que viaja de vuelta a App.jsx. Con esto ya tenemos un filtro real funcionando.

jsx const handleSubmit = (e) => { e.preventDefault(); setSearchedCity(city.trim()); onSearch(city.trim()); };

Al probarlo en el navegador escribimos Bogotá, hacemos clic en Buscar y aparece una sola propiedad que hace match, porque la coincidencia se da en la ciudad [04:38]. Detalle importante: al buscar sin acento, el match sigue siendo exacto porque estamos comparando en minúsculas.

Por qué al borrar no volvían todas las propiedades

Al principio, cuando borrábamos el texto, cambiábamos el estado de city y de la ciudad buscada, pero el filtro no se actualizaba [05:05]. El motivo: la función de limpieza solo tocaba esos dos estados y olvidaba avisarle a onSearch.

La solución fue hacer que, al limpiar, onSearch también pase a ser un valor vacío. Así el estado que vive en App se reinicia y vuelven a mostrarse todas las propiedades [05:35].

¿Por qué el listado no se actualiza al borrar el buscador? Porque el estado de búsqueda no se está reiniciando. Debes llamar a la función que setea la búsqueda con un valor vacío para que el filtro vuelva a mostrar todo.

Después de refrescar la pantalla y repetir la prueba, buscar Bogotá vuelve a filtrar y borrar el texto trae de regreso todas las propiedades. Todo funciona porque el estado se maneja desde App pero está en conexión directa con SearchBar.

Con este flujo le dimos a nuestro buscador la lógica de una funcionalidad real: el listado se actualiza según lo que escribe el usuario. En la siguiente clase vamos a profundizar en el patrón de los componentes controlados.

¿Te animas a agregar un tercer criterio de búsqueda a tu filtro? Cuéntame en los comentarios cómo lo resolviste.