Remove item from String Array ReactJS-CodePudding

I'm working with ReactJS with Typescript and the goal is to have a checkbox component that adds and removes items to a string array according to whether the checkbox is selected or not. My current function only adds to the array, so when I select then unselect a checkbox the item is added twice. Thanks in advance.

Function:

  const handleGroupChange = (groupOptions: any) => {
    const existSelection = selectedGroups;
    existSelection.push(groupOptions.target.value);
    setSelectedGroups(existSelection);
    }
  };

Checkbox:

 <FormControlLabel
   control={
    <Checkbox
      color="primary"
      onChange={e => handleGroupChange(e)}
      value={"MATCHED_MENTORS"}
      />
      }

CodePudding user response：

check whether checkbox is checked or not on the onChange event.

const handleGroupChange = (groupOptions: any) => {
        const existSelection = selectedGroups;
    
        if (groupOptions.target.checked) {
            existSelection.push(groupOptions.target.value);
        } else {
            var index = existSelection.indexOf(groupOptions.target.value);
            if (index !== -1) {
                existSelection.splice(index, 1);
            }
        }
    
        setSelectedGroups(existSelection);
    }

CodePudding user response：

You need to check the checkbox boolean property whether it is checked or not. Please follow this example below and here is the Codesandbox

  const [selectedGroups, setSelectedGroups] = useState([]);

  const handleGroupChange = (groupOptions) => {
    let existSelection = selectedGroups;

    if (groupOptions.target.checked)
      existSelection.push(groupOptions.target.value);
    else
      existSelection = existSelection.filter(item => item !== groupOptions.target.value)

    console.log(selectedGroups);
    setSelectedGroups(existSelection);

CodePudding user response：

The thing here is that you are pushing a boolean as item so the existSelection array should look something like [true, false, true, false] more or less. So it does not do what you initially want. If what you want is just practice you can try this:

const randomStrings = ['gelato', 'frozen_yogurt', 'ice_cream'];

and then when you click on the Checkbox it will trigger onChange wich will be connected to handleGroupChange function and this would look something like:

const handleGroupChange = (isChecked) = {
  if(isChecked){
    //We create a random number between 0 and 2
    const randomIndex = Math.floor(Math.random() * 2);
    //We select an element from randomStrings array based on the random 
      index generated above
    const randomStr = this.randomStrings[randomIndex];
    //Looks if the randomStr already exist in existSelection
      if nothing found it findIndex returns - 1 wich tell us 
      this item is not in the array so we push it. 
    const existInArr = this.existSelection.findIndex(randomStr);
    if(existInArr === - 1){
      existSelection.push(randomStr);
    }
    //I guess you also wanna feed a useState hook here.
    setExistSelection(randomStr);
  }
};

This should do the trick.