Toggling an array of filters
Pure V State

There are two ways you can do this.

Pure

The first functional pure method first copies the array, then checks if the item to toggle exists then depending on that result adds or removes the item. Making sure that the added item is a copy, not a reference. It has no side effects but requires additional memory and CPU cycles.

const toggleItem = (itemDesc, items, prop = "name") =&gt; {
    items = [...items]; 
    const index = items.findIndex(item =&gt; itemDesc[prop] === item[prop]);
    index &gt; -1 ? items.splice(index, 1) : items.push({...itemDesc});
    return items;
}


State

The second does not create a new array and keeps all references It is "functionally" impure and ensures that the changed state is available to all references to the original. It is considerably quicker and uses less memory.

const toggleItem = (itemDesc, items, prop = "name") =&gt; {
    const index = items.findIndex(item =&gt; itemDesc[prop] === item[prop]);
    index &gt; -1 ? items.splice(index, 1) : items.push(itemDesc);
    return items;
}