CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
Samia Sammi
Samia Sammi

Reputation: 155

How to filter useState hook Array and push & pull data to that array?

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

Upvotes: 0

Views: 968

Answers (1)

Bas
Bas

Reputation: 1433

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);
}

Upvotes: 1

Related Questions