want to add values not overwrite react.js and mongoDB

Question

function getFilterQuery() {
   const completedWorkState = WorkflowStates.findOne({title: 'Completed'});
   const inProgressWorkState = WorkflowStates.findOne({title: 'In Progress'});
   const identifiedWorkState = WorkflowStates.findOne({title: 'Identified'});
 
   const completed = {workflowStateId: [completedWorkState._id]};
   const inProgress = {workflowStateId: [inProgressWorkState._id]};
   const identified = {workflowStateId: [identifiedWorkState._id]};
   let finalQuery = {
     archived: false,
     boardId: {$in: boardIds},
     listId: {$nin: [...managerListIds, ...unreportedListIds]},
     createdAt: dateFilterQuery(),
   };
 
   if (params.completed) finalQuery = {...finalQuery, ...completed};
   if (params.inProgress) finalQuery = {...finalQuery, ...inProgress};
   if (params.identified) finalQuery = {...finalQuery, ...identified};
 
   console.log(`finalQuery:`, finalQuery);
   return finalQuery;
 }

Hi, I have a question about react.js and mongoDB. If you click the completed option on the client side, finalQuery’s console log looks like below.

finalQuery:{ 
archived: false 
boardId: {$in: Array(0)} 
createdAt: undefined listId: {$nin: Array(0)} 
workflowStateId: ['ERTYUIIIIOPPCGVH']
 }

Ideally, if a user clicks multiple options like in progress or identified, finalQuery’ workflowStaeId should look like below when console logged.

workflowStateId: ['ERTYUIIIIOPPCGVH','asdasdasdasda','1231231dsxa']

But right now it’s just overwritten. Does anybody know how to solve this?

I tried to change codes

       if (params.completed) finalQuery = {...finalQuery, ...completed};
       if (params.inProgress) finalQuery = {...finalQuery, ...inProgress};
       if (params.identified) finalQuery = {...finalQuery, ...identified};

to

    if (params.completed) finalQuery.push(completed);
    if (params.inProgress) finalQuery.push(inProgress);
    if (params.identified) finalQuery.push(identified);

But got an error saying finalQuery.push is not a function.

Answer 1

You need to concat array in finalQuery.workflowStateId, but you only use object spread syntax to merge objects. You also have to use array spread syntax for .workflowStateId array which is nested in deeper level.

if (params.completed) finalQuery = {
  ...finalQuery,
  ...{
    workflowStateId:
      [...(finalQuery.workflowStateId ?? []), ...completed.workflowStateId]
  }
}