i have an array of objects containing users data stored in a state varaible and a table where I am displaying these users. I have a search field where a user can type name and search. Now my question is when a user types i want to search from these names and update the state variable and when user clears the input ,that time i want to show all users.in simple terms a search functionality.
const searchUsers = () => {
items.filter((item) => {
if (searchTerm === null) {
setItems([...items]);
return item;
} else if (item.title.toLowerCase().includes(searchTerm)) {
setItems([item]);
}
});
};
Advertisement
Answer
You can try useMemo hook for this. You dont even need to update the state for filtered results.
const searchResults = useMemo(() => {
if (!searchTerm) {
return items;
}
return items?.filter((item) =>
item?.toLowerCase()?.includes(searchTerm?.toLowerCase().trim())
);
}, [items, searchTerm]);
You can directly use the searchResults while rendering your table.