Cómo filtrar una lista con ReactJS

React.js es el framework ideal para definir la estructura de nuestro documento. Pero también
es particularmente eficiente manejando listas de datos. Nos ofrece un sistema modular que permite
que nuestro código sea ordenado y, además, la posibilidad de actualizar datos en tiempo
real.Previamente aprendimos a generar listas sencillas utilizando esta herramienta y hoy vamos a
filtrarlas de manera dinámica. Si utilizamos el mismo proyecto con el que trabajamos la última vez,
sólo tendremos que agregar un cuadro de búsqueda.

Si lo analizamos puntualmente, notaremos que es necesario agregar un contenedor parasimpleList que

contenga un cuadro de búsqueda y le pase su valor como un prop.

Es momento de aprovechar que ReactJS nos permite trabajar de forma modular. Utilizaremos el código
del proyecto anterior y le agregaremos un nuevo elemento llamadoSimpleFilterableList, que nos
permitirá colocar nuestro cuadro de búsqueda. Empecemos por armar la parte estática.
Es importante recordar pasar la URL a SimpleList al inicializar React.reder. Esta se encuentra en
las props de SimpleFilterableList.

Para poder filtrar la lista, primero necesitamos pasar el contenido de input a SimpleList en el state de
un elemento que nombraremos userInput. Esto quiere decir que necesitamos asignarle un valor por
default.

El siguiente paso es crear una función que actualice el state deSimpleFilterableList cuando el usuario
ingrese un valor en input. Para lograrlo, es necesario agregar un onChange que active la función que
nombraremos updateUserInput.
Y ya estamos casi listos. Pero, si observamos la jerarquía, el cambio que deseamos se hace
en SimpleListRow, que es un sub elemento de SimpleList. Este último es quien recibe el valor
de userInput, por lo que debe pasar el dato para que se refleje en los props deSimpleListRow. Por
conveniencia, lo vamos a pasar con el nombre filterBy en lugar deuserInput.

Ahora ya tenemos el userInput en el state filterBy de SimpleListRow y podemos usarlo para filtrar la
tabla con un simple if en rows.map. Esta es una función de React.js que nos facilita iterar entre cada
uno de los objetos con un arreglo. Para poder consumirlo directamente debemos asignarle una variable,
igual que como lo hicimos con rows.
Comúnmente esta clase de filtros requieren controladores relativamente complejos; pero gracias a la
arquitectura de ReactJS, podemos aplicar la lógica directamente en la visualización
con ViewController. Como puedes notar, este hace muy fácil planear la lógica de un elemento. Es tan
lineal e intuitiva que si algo falla, es sumamente fácil ubicar el error; facilitando así el proceso de
depuración y mantenimiento.