Consider two arrays leftArray (data is local) and rightArray (data is inside server).

So my component allows users to swap elements inside the list with each other, either upload to the server or remove from server using the left and right buttons.

The left button is to remove the elements from the server and The right button is to send elements to the server.

Please refer the image below, This is what Ant design Transfer component looks like:

So my issue is when user manipulates the data, either to the left of right, I want to have all the keys which which are newly added or removed from the server. But the elements on the rightArray which is already in the server, I do not need the keys, because it is already in the server.

So how would I separate the assigned keys (right list) and unassigned keys (left list)? The function onChange runs whenever the user either clicks left or right, I initially declare two empty arrays and start concatenating, either addList or removeList, Now I want to find out exactly which keys are removed from the server and which keys are added from the server.

below is the function onChange:

if (direction === 'right') {

 addedList= addedList.concat(movedKeysRight)
 addedList= [...new Set(addedList)] // to remove duplicate elements Incase a list 
 item is added to the right, removed and then added again I don't want to repeat the keys 
 that's why I have it here
}
if (direction === 'left') {
  removedList = removedList.concat(movedKeysLeft)
  removedList= [...new Set(removedList)]
}