Estoy tratando de construir un cuadro de búsqueda. Cuando lo escribes, filtra automáticamente mi archivo App.js (Tarjetas de robots).
render() { const filteredRobots = this.state.robots.filter(robots => { return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase()) }) return( <div className='tc'> <h1>RoboFriends</h1> <SearchBox searchChange={this.onSearchChange}/> <CardList robots={filteredRobots}/> </div> ) }Tengo un archivo robots.js separado en el que enumero las propiedades de los robots:
export const robots = [ { id: 1, name: 'Leanne Graham', username: 'Bret', email: 'Sincere@april.biz' },Mi método de filtro funciona cuando solo pongo una propiedad en él. En el código anterior, lo estoy ilustrando cuando se filtra por nombre. También me gustaría incluir la propiedad "correo electrónico", de modo que cuando escriba en el campo de búsqueda, también filtre por el correo electrónico y no solo por el nombre.
Gracias de antemano, este es mi primer post, perdón por no ser claro, hace poco comencé a aprender.
El método de filtro pasa los elementos de la matriz directamente.
const searchedString = this.state.searchfield.toLowerCase() const filteredRobots = robots.filter(robotItem => robotItem.name.toLowerCase().includes(searchedString) || robotItem.username.toLowerCase().includes(searchedString) )más sobre el método de filtro en mdn docs
Puede combinar los campos de objetos en una sola cadena y usarla en lugar de usar el name
const filteredRobots = this.state.robots.filter(robot => { return Object.values(robot).join(" ").toLowerCase().includes(this.state.searchfield.toLowerCase()) })Ahora, todos los campos del robot (nombre, nombre de usuario, correo electrónico, identificación) se consideran en su función de búsqueda.