Currently, I have a FlatList that I am attempting to filter using multiple inputs from dropdown selectors. Here is the code snippet for my FlatList component:
<FlatList
style={styles.list}
data={data.filter(filteredUsers)}
renderItem={renderItem}
keyExtractor={(item) => item.id}
ListEmptyComponent={EmptyItem}
/>
Here is an example of an item from the data object:
{ id: "2", name: "Harry", city: "Scottdale", state: "AZ", instrument: ["Cowbell", "Ocarina"] },
Additionally, I have a filterUsers function that currently works with a single string input. This function displays all items in the data object by default and filters down as users start 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 now aim to retain this functionality after changing the type of instrument to an array of strings rather than a single string.
After updating the instrument type within the filteredUsers function to be instrument: Array<string>, I'm struggling to figure out how to make the filtering work as it did before the change to an array. Any assistance or additional information provided would be greatly appreciated. Thank you.