Running .filter and .map synchronously-CodePudding

Hello I am having an issue running this function wherein im trying to filter this an array of objects then afterwards im reorganizing by reassigning my id with the index of the .map The issue that occurs is that the .filter is not deleting/removing an items in the function. Here is my code as reference: What do be the best solution of this. Any input would be helpful thank you.

 const removeData = (id) => {
        const del = idleData.filter(idle => id !== idle.id).map((item,index) => (
            {
                id: index, 
                days: item.day,
                comments: item.comments,
                cost: item.cost,
                reason: item.reason,
                portCallVoyageId: item.portCallVoyageId,
                changedBy: item.changedBy
            }
        ));
        setIdleData(del);
    }

Here is idleData and idle:

idleData = [{
  id: 0,
  cost: 10,
  days: 10,
  comments: 'comment 1',
  reason: "reason 1",
  changedBy: "user1"
}, {
  id: 1,
  cost: 20,
  days: 20,
  comments: 'comment 2',
  reason: "reason 2",
  changedBy: "user2"
}];

idle = 0;

CodePudding user response：

Just tested your code and I think it works fine and the possible problem is in the idle variable.

I slightly rewrote the source code.

const idleData = [
{id: 0,cost: 10,days: 10,comments: 'comment 1',reason: "reason 1",changedBy: "user1"}, 
{id: 1,cost: 20,days: 20,comments: 'comment 2',reason: "reason 2",changedBy: "user2"},
{id: 2,cost: 30,days: 30,comments: 'comment 3',reason: "reason 3",changedBy: "user3"},
{id: 3,cost: 40,days: 40,comments: 'comment 4',reason: "reason 4",changedBy: "user4"},
{id: 4,cost: 50,days: 50,comments: 'comment 5',reason: "reason 5",changedBy: "user5"},
];

//idle = 0; 

const removeData = (omitId) => {
  const del = idleData
    .filter(({ id }) => id !== omitId)
    .map((item, index) => ({ ...item, id: index }));

  console.log(del);
  // setIdleData(del);
};

  console.log(del);
  // setIdleData(del);
};

removeData(0);

.as-console-wrapper{min-height: 100%!important; top: 0}

Same result but without .filter

const idleData = [
{id: 0,cost: 10,days: 10,comments: 'comment 1',reason: "reason 1",changedBy: "user1"}, 
{id: 1,cost: 20,days: 20,comments: 'comment 2',reason: "reason 2",changedBy: "user2"},
{id: 2,cost: 30,days: 30,comments: 'comment 3',reason: "reason 3",changedBy: "user3"},
{id: 3,cost: 40,days: 40,comments: 'comment 4',reason: "reason 4",changedBy: "user4"},
{id: 4,cost: 50,days: 50,comments: 'comment 5',reason: "reason 5",changedBy: "user5"},
];

//idle = 0; 

const removeData = (omitId) => {
  const del = idleData
    .flatMap((item, index) => (item.id !== omitId) 
      ? { ...item, id: index } 
      : []);

  console.log(del);
  // setIdleData(del);
};


removeData(0);

.as-console-wrapper{min-height: 100%!important; top: 0}

CodePudding user response：

Your code is working like a champ! I am adding the code snippet below. Please let me know what challenges you are facing. I will modify that as per the input.

Demo :

const idleData = [{
  id: 0,
  cost: 10,
  days: 10,
  comments: 'comment 1',
  reason: "reason 1",
  changedBy: "user1"
}, {
  id: 1,
  cost: 20,
  days: 20,
  comments: 'comment 2',
  reason: "reason 2",
  changedBy: "user2"
}];

 const removeData = (id) => {
   const del = idleData.filter(idle => id !== idle.id).map((item,index) => (
     {
       id: index, 
       days: item.day,
       comments: item.comments,
       cost: item.cost,
       reason: item.reason,
       portCallVoyageId: item.portCallVoyageId,
       changedBy: item.changedBy
     }
   ));
   console.log(del);
 }
 
 removeData(0);