Skip to content

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

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 => {
            <div className='tc'>
                <SearchBox searchChange={this.onSearchChange}/>
                <CardList robots={filteredRobots}/>

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: ''

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.



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.