I am searching for filter React useState hook array. Not getting any answer. Please help me.
I define useState string array-
const [filterBrand, setFilterBrand] = useState<string[]>([]);
Here is my function for filtering this array and push, pull data-
const brandHandler = (item: string) => {
//Here I need if filterBrand already have the
item then remove it and update the state,
else add the item to this array and update
the state
}
Here I need to check if item already have in filterBrand. then remove it from filterBrand and update the State.
Else I need to add the item to filterBrand and update the State
I already tried it-
const brandHandler = (item: string) => {
const items: string[] = [...filterBrand];
if (!filterBrand.includes(item)) {
items.push(item)
} else {
return items.filter(f => f !== item)
}
setFilterBrand(prevState => ({ ...prevState, ...items }));
}
But getting this error-
Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method
Do this
// setFilterBrand(prevState => [ ...prevState, ...items ]); would work
setFilterBrand(items) // likely what you want instead
instead of
setFilterBrand(prevState => ({ ...prevState, ...items }));
You are transforming your array into an object for some reason here
Full code:
const brandHandler = (item: string) => {
let items: string[] = [...filterBrand];
if (!filterBrand.includes(item)) {
items.push(item)
} else {
items = items.filter(f => f !== item)
}
setFilterBrand(items);
}