Como otros ya mencionaron: no es React lo que filtra u ordena la lista, es JavaScript. Puede hacerlo con funcionalidades incorporadas de JavaScript como filtros o bibliotecas de utilidades como lodash o ramda.
Pero para darle una breve explicación de cómo funcionaría una funcionalidad de filtro en una aplicación React simple, tendría su lista de compañías en el estado de su componente y la representaría utilizando el mapa de funcionalidad incorporado de JavaScript.
empresas const = [
{nombre: ‘foo’, activo: verdadero, tecnología: falso,},
{nombre: ‘bar’, activo: falso, tecnología: verdadero,},
{nombre: ‘xyz’, activo: verdadero, tecnología: verdadero,},
];
- ¿Cuál es el lenguaje de programación del lado del servidor más apropiado para un ERP o una aplicación de comercio electrónico, Java, C #, Python o Node.js?
- Cómo escribir una plantilla de propuesta de sitio web
- Cómo hacer un sitio web de comparación de precios de actualización automática
- ¿Cómo funciona un sitio de gran empresa como Yahoo! manejar gran tráfico?
- Cómo conseguir trabajo en el campo .net
La aplicación de clase extiende React.Component {
constructor (accesorios) {
super (accesorios);
this.state = {
lista: empresas,
};
}
render () {
const {list} = this.state;
regreso (
)}
);
}
}
Supongamos que desea filtrar las empresas por su estado activo o tecnológico. Podría definir dos funciones de filtro en un objeto que devuelva cada una de las listas filtradas:
const COMPANY_FILTERS = {
‘BY_ACTIVE’: empresa => empresa.activo,
‘BY_TECH’: empresa => empresa.tech,
};
Ahora puede activar cada uno de esos en un botón en su método de renderizado. Además, la clave de propiedad se guardará en el estado local del componente. Según la clave de propiedad, la función de filtro se utiliza para filtrar la lista de elementos. Se establece un filtro predeterminado en el estado inicial:
La aplicación de clase extiende React.Component {
constructor (accesorios) {
super (accesorios);
this.state = {
lista: empresas,
filterKey: ‘BY_ACTIVE’,
};
}
render () {
const {list, filterKey} = this.state;
const filterList = list.filter (COMPANY_FILTERS [filterKey]);
regreso (
)}
<botón
tipo = “botón”
onClick = {() => this.setState ({filterKey: ‘BY_ACTIVE’})}
> Por activo
<botón
tipo = “botón”
onClick = {() => this.setState ({filterKey: ‘BY_TECH’})}
> Por tecnología
);
}
}
Puedes jugar con él en este JS Bin. Sin embargo, usa JavaScript ES6. Si desea obtener más información sobre las funcionalidades utilizadas en React, puede leer el libro de código abierto El camino para aprender React.
