Un filtro de búsqueda es un elemento fundamental para la utilidad de cualquier aplicación web con múltiples datos, pues permite que el usuario limite los resultados para encontrar lo que está buscando. En este post, te enseñaremos cómo crear un filtro de búsqueda en React a partir del método filter.
¿Cómo crear un filtro de búsqueda en React?
Existen dos opciones para crear un filtro de busqueda en React. La primera es tener un backend, por ejemplo un swagger de tu API, en el que se puedan aplicar filtros. Entonces, una de las opciones sería recoger en unos inputs los valores de los filtros y enviarlos a la URL para que el backend te traiga los datos filtrados. En este sentido, aplicaríamos la lógica de filtrado que tenga el backend.
La otra forma de crear un filtro de búsqueda en React implica manejar el filtrado más desde el frontend del desarrollo web. De esta forma, traemos todos los datos del endpoint de nuestra API y vamos filtrando en el frontend con distintos métodos.
Te en cuenta que este método puede afectar a la performance de tu aplicación si tienes demasiados datos. Por ello, es mejor para prácticas y proyectos pequeños.
¿Cómo filtrar en el frontend de React?
Antes de hacer un filter en react en el frontend, debes haber traído una serie de datos y estar pintándolos en pantalla. Por ello, si no has hecho este proceso, te recomendamos leer nuestro post sobre pintar datos de una API en React. Allí desarrollamos un ejemplo que seguiremos usando a continuación.
Lo primero que debemos hacer para crear un filtro de búsqueda en React es crear un input en el que el usuario pueda empezar a filtrar. Para este ejemplo, vamos a filtrar una serie de nombres y apellidos con base en las letras que contienen. Entonces, el input será de tipo texto:
< input type =”text”/>
Como para todos los input controlados, deberemos crear un estado para guardar sus datos:
const [search, setSearch] = useState (‘ ‘);
Ahora, el valor del input será este estado. Además, para acceder a los cambios de este estado, deberemos usar el evento onChange en React:
< input type =”text” value = {search} onChange = {handleChange}/>
La función handleChange que estamos pasando como valor del onChange sirve para capturar los cambios de datos del estado. Esta función se ve de la siguiente manera:
const handleChange = {event} => {
setSearch (event.target.value);
};
Ahora, ¿cómo hacemos para que el input que ponga el usuario funcione como filtro? Es decir, que si pone p, solo le aparezcan los datos con p. Para esto podemos usar el método filter en JavaScript para recorrer el array y obtener un nuevo listado que contenga solamente los datos que coincidan con el estado. Entonces, suponiendo que nuestro array se llama players, esta sería la función:
constFilteredPlayers = players.filter ((player) => {
if (player.first_name.toUpperCase( ).includes (search.toUpperCase( ))) {
return true;
}
return false;
});
¿Qué sigue?
Ahora que sabes cómo crear un filtro de búsqueda en React y haz hecho tu propio buscador en react, ¡es momento de usarlo en tus propios proyectos! Para aprender a desarrollar todo tipo de proyectos de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio ideal para aprender herramientas y lenguajes que catapultarán tu carrera en el sector IT. ¡Inscríbete ahora!
