How do you set multiple properties to be returned in Javascript-React?

Question

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.

Answer 1

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.