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
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));
Explanation
filteredUsers method is set to be any (for brevity). It may be appropriate to declare the object's props instead of any.state and instrument and those are also declared separately (this may probably come from either state or props)state the existing logic appliesinstrument, 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.