uncheck (removing) last item in checkbox and check(adding) other at the same time , keeps the unchecked value and adds other checked value

Question

here only one person is assigned

Now, unchecked the previous person(already added), and check other other

onSubmit , it adds then both

here is my code :

 const [assignCustomerId, setAssignCustomerId] = useState([]);

  const handleOnChange = (id, event) => {
    //checking the already present customers by id
    const alreadyAssignedDeliveryMan = deliveryBoy?.assigned_customers.map(
      (d) => d.milkman_buyer_customer_id
    );

    // here, if already customer is assigned in database then pushing new checked
    // and keeping the database data also
    if (assignCustomerId.length === 0) {
      for (let i = 0; i < alreadyAssignedDeliveryMan.length; i++) {
        assignCustomerId.push(alreadyAssignedDeliveryMan[i]);
      }
    } else {
      console.log("null");
    }
    //if user checked, then push it into state array
    //if user unchecked , then removing the item from array
    const checked = event.target.checked;
    if (checked === true) {
      assignCustomerId.push(id);
      setAssignCustomerId(assignCustomerId);
    } else if (checked === false) {
      for (var i = assignCustomerId.length - 1; i >= -1; i--) {
        if (assignCustomerId[i] === id) {
          assignCustomerId.splice(i, 1);
          setAssignCustomerId(assignCustomerId);
        }
      }
    }
  };

Answer 1

Issue

You are mutating your assignCustomerId state and saving the same array reference back into state. When updating the "already assigned delivery persons" the code pushes directly into the assignCustomerId array. Also, when checked is true the code is pushing directly into the assignCustomerId array, and when checked is false the .splice does an in-place mutation

if (assignCustomerId.length === 0) {
  for (let i = 0; i < alreadyAssignedDeliveryMan.length; i++) {
    assignCustomerId.push(alreadyAssignedDeliveryMan[i]); // <-- state mutation!
  }
} else {
  console.log("null");
}

const checked = event.target.checked;
if (checked === true) {
  assignCustomerId.push(id); // <-- state mutation!
  setAssignCustomerId(assignCustomerId);
} else if (checked === false) {
  for (var i = assignCustomerId.length - 1; i >= -1; i--) {
    if (assignCustomerId[i] === id) {
      assignCustomerId.splice(i, 1); // <-- state mutation!
      setAssignCustomerId(assignCustomerId);
    }
  }
}

Solution

When adding a value to the assignCustomerId array create a shallow copy and append the new element value(s). When removing a value from the `assignCustomerId array then filter it and return a new array reference.

if (!assignCustomerId.length) {
  setAssignCustomerId(state => state.concat(alreadyAssignedDeliveryMan));
} else {
  console.log("null");
}

const { checked } = event.target;

if (checked) {
  setAssignCustomerId(state => [...state, id]);
} else {
  setAssignCustomerId(state => state.filter((el) => el !== id));
}

Answer 2

I think this can help you in remove part

let index = assignCustomerId.findIndex(x=>x===id)
assignCustomerId.splice(index, 1);
setAssignCustomerId([...assignCustomerId]);