update the array of object using useState hook

Question

I am working on next js project and I have the following input object array set to the filesize useState. Here the keys can be considered as the indices of file list and the value is the size of that particular file Let's say 2nd index key-value pair is removed from the file list. Then I need to change the fileSize usestate in the way that all the values from 2nd index should be moved up. I have provided a input object list and the output object list that I want to have as the result

input file Object Array:    
   {
      0: 39768
      1: 13264
      2: 69432
      3: 4567
      4: 789
    }
output file Object Array:
    {
      0: 39768
      1: 13264
      2: 4567 
      3: 789
    }

So Far I have tried this way

const [fileSize,setFileSize] = useState({});

//Here I set the input files array to setFileSize usestate and this is working fine

setFileSize(fileSize => ({
            ...fileSize,
            [num]: f.size,
          }))

Now I need to shift up the values from the index that file is removed. That means above output array should be set to fileSize useState. I tried below code But this is not working properly

    var length = Object.keys(fileSize).length;

    setFileSize(fileSize => {
      return Object.entries(fileSize).map(([key, value]) => {
           if(key>index && key<length-1){
             return {[parseInt(key)-1]: value}
           }
      })
  });
    

I need your help to change the fileSize state from input array to output array. Any help would be much appreciated

Answer 1

You can first Array.prototype.filter() the Object.entries() of fileSize and finally Array.prototype.reduce() to get the object with array indexes as keys for each of the values

Code:

const index = 1
const fileSize = { 0: 39768, 1: 13264, 2: 4567, 3: 789 }

const result = Object
  .entries(fileSize)
  .filter(([k]) => +k !== index)
  .reduce((a, [, v], i) => (a[i] = v, a), {})

console.log(result)