Search flatlist - reactjs

Question

I am displaying a list of contacts from my address book in a flatlist and want to be able to search the list. The issue is that initially the list is empty and I get an error because it is trying to filter undefined.
If I type a name though it works and if I delete my search query it then shows all users. I would like it do this from the start. I am not sure why it is undefined intially, perhaps because the state has not yet been set.
const AddContactScreen = ({ navigation }) => {
const [contacts, setContacts] = useState();
const [query, setQuery] = useState("");
const [filteredContactList, setFilteredContactList] = useState(contacts);
useEffect(() => {
(async () => {
const { status } = await Contacts.requestPermissionsAsync();
if (status === "granted") {
const { data } = await Contacts.getContactsAsync({
fields: [Contacts.Fields.PhoneNumbers],
sort: Contacts.SortTypes.FirstName,
});
if (data.length > 0) {
setContacts(data);
}
const newContacts = contacts.filter((item) =>
item.name.includes(query)
);
setFilteredContactList(newContacts);
}
})();
}, [query]);
return (
<Screen>
<FlatList
ListHeaderComponent={
<View style={styles.searchContainer}>
<TextInput
style={styles.searchField}
placeholder="Search"
onChangeText={setQuery}
value={query}
/>
</View>
}
data={filteredContactList}
ItemSeparatorComponent={ListItemSeparator}
keyExtractor={(contact) => contact.id.toString()}
renderItem={({ item }) => (
<ListItem
title={item.name}
onPress={() => console.log("contact selected", item)}
/>
)}
/>
</Screen>
);
};
const styles = StyleSheet.create({
searchContainer: {
padding: 15,
},
searchField: {
borderRadius: 15,
borderColor: "gray",
borderWidth: 1,
padding: 10,
},
});
export default AddContactScreen;

Answer 1

The best practice would be to set your initial value of contacts to an empty array []
So your state would be
const [contacts, setContacts] = useState([]);

Answer 2

const [contacts, setContacts] = useState();
const [query, setQuery] = useState("");
const [filteredContactList, setFilteredContactList] = useState(contacts);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
setLoading(true);
const { status } = await Contacts.requestPermissionsAsync();
if (status === "granted") {
const { data } = await Contacts.getContactsAsync({
fields: [Contacts.Fields.PhoneNumbers],
sort: Contacts.SortTypes.FirstName,
});
setLoading(false);
setContacts(data.length ? data : []);
}
})();
}, [query]);
useEffect(() => {
if(contacts.length) {
const newContacts = contacts.filter((item) =>
item.name.includes(query)
);
setFilteredContactList(newContacts);
}
}, [contacts])
if(loading) return <p>loading...</p>;
if(!contacts.length) return <p>No data found</>;
// your rest of the code.
NOTE: i have written the code from the imagination. You might need to do some tweak.

Answer 3

I would use useEffect when component mounts to get initial contacts and handle the query in a separate function:
useEffect(() => {
getInitialContacts()
}, []);
const getInitialContacts = async () => {
setLoading(true);
const { status } = await Contacts.requestPermissionsAsync();
if (status === "granted") {
const { data } = await Contacts.getContactsAsync({
fields: [Contacts.Fields.PhoneNumbers],
sort: Contacts.SortTypes.FirstName,
});
setLoading(false);
setContacts(data.length ? data : []);
}
});
}
you can use another function that you call when text is entered:
const handleQuery = (query) => {
const newContacts = contacts.filter((item) =>
item.name.includes(query)
);
setFilteredContactList(newContacts);
}