Filter multiple values in React

Question

My filter function here works great, however it only filters the first name (see code). So I was wondering what the "best" way to make it filter by surname and phone too (see image)! Here's my filter at the moment:

const filteredUsers = this.state.dataToDisplay.filter(item => {
  return (
    /*Only firstname!*/item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0
  )
})

And here's the image:

Thanks a lot! :D

Alex Chuev · Accepted Answer · 2017-07-27 20:42:31Z

21

You are using filtering on the Javascript array level so just extend your criteria:

const filteredUsers = this.state.dataToDisplay.filter(item => {
  const query = this.state.search.toLowerCase();

  return (
    item.name.toLowerCase().indexOf(query) >= 0 ||
    item.surname.toLowerCase().indexOf(query) >= 0 || 
    item.phone.toLowerCase().indexOf(query) >= 0
  )
});

edited Jul 27, 2017 at 20:42

Alex Chuev

7235 silver badges18 bronze badges

answered Jul 27, 2017 at 20:38

Samich

30.4k6 gold badges70 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Nordström Over a year ago

Doesn't that go agains the DRY principle? Thanks for answering tho! :D

Samich Over a year ago

You can create a function where you will normalize to lower case and then call it for each attribute you have - that's code optimization :). Something like ignoreCaseCompare(value1, value2)

Kamil Socha · Accepted Answer · 2017-07-27 20:40:29Z

3

Just add more conditions to filter function

    const filteredUsers = this.state.dataToDisplay.filter(item => {
          return (
              item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0 
              || item.surname.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0 
              || item.phone.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0;
          )
        })

answered Jul 27, 2017 at 20:40

Kamil Socha

2991 silver badge10 bronze badges

Comments

lunochkin · Accepted Answer · 2017-07-27 20:41:19Z

3

You can use something like this code, eg:

const filterField = (search, value) => value.toLowerCase().indexOf(search.toLowerCase()) >= 0;

const orFilter = (search, values) => values.some(filterField.bind(null, search));

const filteredUsers = this.state.dataToDisplay.filter(item =>
  orFilter(this.state.search, [item.name, item.surname, phone]);
)

answered Jul 27, 2017 at 20:41

lunochkin

7844 silver badges17 bronze badges

Collectives™ on Stack Overflow

Filter multiple values in React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related