I am trying to build a search box. When you type in it, it automatically filters my App.js file (Cards of 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> ) }
I have a separate, robots.js file in which I list the properties of the robots:
export const robots = [ { id: 1, name: 'Leanne Graham', username: 'Bret', email: 'Sincere@april.biz' },
My filter method works, when I only put a single property in it. In the code above, I am illustrating it when it is filtered by name. I would like to include the “email” property as well, so that when I type in the search field, it also filters by the email and not just the name.
Thanks in advance, this is my first post, sorry for not being clear, I recently started learning.
Advertisement
Answer
You can combine the objects fields into a single string and use it instead of using the name
const filteredRobots = this.state.robots.filter(robot => { return Object.values(robot).join(" ").toLowerCase().includes(this.state.searchfield.toLowerCase()) })
Now, all the robot fields (name, username, email, id) are considered in your search function.