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.
filter method passes the array items directly.
const searchedString = this.state.searchfield.toLowerCase()
const filteredRobots = robots.filter(robotItem => robotItem.name.toLowerCase().includes(searchedString) || robotItem.username.toLowerCase().includes(searchedString) )
more about the filter method in mdn docs
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.