I have a FlatList that I am trying to filter with multiple inputs from dropdown selectors. Here is my FlatList component

      <FlatList
        style={styles.list}
        data={data.filter(filteredUsers)}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        ListEmptyComponent={EmptyItem}
      />

A sample item from the data object

  { id: "2", name: "Harry", city: "Scottdale", state: "AZ", instrument: ["Cowbell", "Ocarina"] },

And the filterUsers function that is working with a single string, which shows all items in the data object and filters down when a user starts selecting options from the dropdown. When cleared the full data list is shown again.

  const filteredUsers = (item: { state: string; instrument: string }) => {
    return (
      item.state.toLowerCase().indexOf(state.toLowerCase()) >= 0 &&
      item.instrument.toLowerCase().indexOf(instrument.toLowerCase()) >= 0
    )
  }

I'd like to have that same functionality after changing instrument to an array of strings rather than a single string.

Ive updated the instrument type in filteredUsers to instrument: Array<string> but can not figure out how to get the filtering to work as it did before I updated to the array. I appreciate any help and would happily provide more information if I left anything out. Thanks

CodePudding user response：

This may be one implementation to achieve the desired objective:

Sample data:

const data = [
  { id: "2", name: "Harry", city: "Scottdale", state: "AZ", instrument: ["Cowbell", "Ocarina"] },
  { id: "2", name: "Harry", city: "Scottsdale", state: "AZ", instrument: ["Towbell", "Ocarina"] },
  { id: "2", name: "Harry", city: "Scottdale", state: "PA", instrument: ["Towbell", "Odarina"] },
];

Simulate the values that will be used to filter the data:

const state = 'AZ';
const instrument = 'Cowbell';

The filteredUsers method:

const filteredUsers = (item: any) => {
  return (
    item.state.toLowerCase().indexOf(state.toLowerCase()) >= 0 &&
    item.instrument.join().toLowerCase().indexOf(instrument.toLowerCase()) >= 0
  )
}

Invoke the filter manually:

console.log(data.filter(filteredUsers));

Link to TypeScript Playground

Explanation

• The parameter passed into the filteredUsers method is set to be any (for brevity). It may be appropriate to declare the object's props instead of any.
• The values that will be used to filter are state and instrument and those are also declared separately (this may probably come from either state or props)
• When searching for state the existing logic applies
• When searching for instrument, the newly-transformed Array in the item is turned into a string (by using .join) and existing logic is applied to this new string (which is a concatenation of all elements of the instrument array).

NOTE: This is most-certainly not the best solution. And, I'm sure there are several points that need to be updated. Happy to learn more and update this.