I am trying to implement a functionality where I want to push object into an array when the user checked it and remove it if the user unselects it. I have a menu where I am collecting user choices. I have implemented code but it has not resolved my issue, Could someone please help me how to resolve this issue. Thanks

  const selectSingle = (id, item, index) => {
    const user = Cookies.get("user") && JSON.parse(Cookies.get("user"));
    let callScheduleIds = Object.assign([], allCallNotifications);

    if (callScheduleIds.findIndex((item) => item.order_id === id)) {
      callScheduleIds.push({
        order_id: id,
        phone_number: item.phone1,
        sender_id: user.user.id,
      });
    } else {
      callScheduleIds.splice(callScheduleIds.indexOf(id), 1);
    }
    setAllCallNotifications(callScheduleIds);
  };

CodePudding user response：

Instead of using push why not use the id as the index

const selectSingle = (id, item, index) => {
    const user = Cookies.get("user") && JSON.parse(Cookies.get("user"));

    let callScheduleIds = Object.assign([], allCallNotifications);
    let callScheduleByIds = callScheduleIds.createIdScheduleList();

    // The user has already selected this, so it makes sense this is where it gets deleted
    if (typeof(callScheduleByIds[id]) !== 'undefined') {
        callScheduleByIds = callScheduleByIds.removeScheduleByIndex(id);
    } 
    // The user has not yet picked this schedule, lets add it to the list
    else {
        callScheduleByIds[id] = {
            order_id: id,
            phone_number: item.phone1,
            sender_id: user.user.id,
        };
    };
    
    // In theory, this line will convert callScheduleByIds back to callScheduleIds
    setAllCallNotifications(callScheduleByIds.loopCallSchedules());
};

/**
* This function will find the scheduleIndex and delete it.
* @param integer scheduleIndex
* @return Array
*/
Array.prototype.removeScheduleByIndex = function(scheduleIndex) {
    let callScheduleIds = this;
    // Check that we have a scheduleIndex
    if (typeof(scheduleIndex) === 'undefined') {
        return callScheduleIds;
    };
    // Check if we even have scheduleIndex inside callScheduleIds
    if (typeof(callScheduleIds[scheduleIndex]) === 'undefined') {
        return callScheduleIds;
    };
    // The index of "scheduleIndex" exists in callScheduleIds, delete it?
    // Clear the previous scheduleItem (this will ensure there is not duplicate schedule).
    // If this section fails, you will get duplicate DATA
    if (typeof(scheduleIndex) === "number") {
        // This is our fail-safe, it will ensure scheduleIndex is removed
        delete callScheduleIds[scheduleIndex];
        // RE-INDEX our LIST, this will remove any UNDEFINED indexes
        callScheduleIds = callScheduleIds.createIdScheduleList();
    };
    // Success!
    return callScheduleIds;
};

/**
* This function will re-index the callSchedules into ID based list
* @param void
* @return Array
*/
Array.prototype.createIdScheduleList = function() {
    let callSchedules = this;
    let callScheduleKeys = Object.keys(callSchedules);
    let indexedScheduleList = [];
    for (let i = 0; i < callScheduleKeys.length; i  ) {
        var scheduleKey = callScheduleKeys[i];
        if (typeof(callSchedules[scheduleKey]) === 'undefined') {
            continue;
        };
        var scheduleValue = callSchedules[scheduleKey];
        indexedScheduleList[scheduleValue.order_id] = scheduleValue;
    };
    return indexedScheduleList;
};

/**
* This function will allow us to LOOP over the Call Schedules
* @param function callback
* @return Array
*/
Array.prototype.loopCallSchedules = function(callback) {
    let callSchedules = this;
    let callScheduleKeys = Object.keys(callSchedules);
    let isCallBack = Boolean(typeof(callback) === 'function');
    let normalScheduleList = [];
    for (let i = 0; i < callScheduleKeys.length; i  ) {
        var scheduleKey = callScheduleKeys[i];
        if (typeof(callSchedules[scheduleKey]) === 'undefined') {
            continue;
        }
        var scheduleValue = callSchedules[scheduleKey];
        var breakSchedule = undefined;
        if (isCallBack) {
            breakSchedule = callback(scheduleKey, scheduleValue);
        };
        if (typeof(breakSchedule) === 'undefined') {
            continue;
        } else if (!Boolean(breakSchedule)) {
            break;
        };
        normalScheduleList.push(scheduleValue);
    };
    return normalScheduleList;
};

You main issue though is that you have the if/else in wrong order

const selectSingle = (id, item, index) => {
    const user = Cookies.get("user") && JSON.parse(Cookies.get("user"));
    let callScheduleIds = Object.assign([], allCallNotifications);


    if (callScheduleIds.findIndex((item) => item.order_id === id) === -1) {
        callScheduleIds.push({
            order_id: id,
            phone_number: item.phone1,
            sender_id: user.user.id,
        });
    } else {
        callScheduleIds.splice(
            callScheduleIds.findIndex((item) => item.order_id === id),
            1
        );
    }
    setAllCallNotifications(callScheduleIds);
};