Adding or removing from an array based on if it includes event

Question

I am trying to have a single button that will add the value to the array, or if the value already exists in the array to remove that value.
The array is called toppings

const ToppingPlusMinus = (e) => {
  if (toppings.includes(e.target.value, 1)) {
    removeTopping(e)
  }
  else {
    changeToppings(e);
  }
}

The two functions

const removeTopping = (e) => {
  toppings.splice(e.target.value)
}

const changeToppings = (e) => {
    setToppings([...toppings, e.target.value]);
  };

The buttons are toppings on a pizza, and they are in this format

<button
            type="button"
            value="Sausage, "
            className="button btn first"
            onClick={(event) => {
              ToppingPlusMinus(event);
            }}
          >
            Sausage
          </button>

This works fine for adding the value to the array, however on removal there are unexpected outcomes.

the item only is removed after the user double clicks the button
the removal also removes the topping before it in the array.
the button does not stay in its active state while the item is in the array (I haven't attempted this, but if anyone know how to do it I'd be appreciative)

I have set up a codesandbox with my code here I appreciate your help.

score 1 · Answer 1 · answered Dec 11 '20 at 23:14

First, the .includes doesn't need the second argument. toppings.includes(e.target.value) should be sufficient.

Second, you should define the remove function like this:

const removeTopping = (e) => {
  setToppings((toppings) => {
    return toppings.filter(topping => topping !== e.target.value)
  })
}

This should result in setting your toppings array with a new array that doesn't contain the selected value. You can also pass the value directly to your removeTopping and changeToppings functions.

score 1 · Accepted Answer · answered Dec 11 '20 at 23:15

1

I have made a working example on this code sandbox, so please check it!

The main reason your code doesn't work is the usage of toppings.splice(e.target.value) as here you are trying to directly modify the state without following the proper flow of setting it. So you would need to filter it out properly.

In my example, I used a different approach for the values, but the logic for removing them could remain the same with your approach too.

answered Dec 11 '20 at 23:15

Renan Souza

775
5
23

Thank you, your solution is very understandable – imstupidpleasehelp Dec 12 '20 at 00:41

score 1 · Answer 3 · answered Dec 11 '20 at 23:40

So basically you have array of items and you want to remove item if it exist.

This is vanilla js solution:

let toppings = []; // this will hold the topping 
const ToppingPlusMinus = (e) => {    // this will trigger on click
    if (toppings.indexOf(e.target.value) > -1) { // if the value of the button exist:
        removeA(toppings, e.target.value);     // remove it
    }
    else {
        toppings.push(e.target.value); // add it to the array
    };
    document.querySelector('#toppings').textContent = toppings.toString(); // this for demo
};

function removeA(arr) {
// https://stackoverflow.com/a/3955096/6525081
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}

#toppings {font-size: larger;}

<button type="button" value="Sausage" className="button btn first" onClick="ToppingPlusMinus(event)">Sausage</button>
<button type="button" value="onion" className="button btn first" onClick="ToppingPlusMinus(event)">Onion</button>
<button type="button" value="olive" className="button btn first" onClick="ToppingPlusMinus(event)">Olive</button>

<div id="toppings"></div>

Adding or removing from an array based on if it includes event

3 Answers3