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

Please provide a minimal, reproducible example with the expected output. — Marios Nikolaou, May 04 '22 at 17:31

score 1 · Answer 1 · answered May 04 '22 at 16:55

1

What you're looking for is the function filter, map won't help you in this case since what map does is transform the array object into another array object, without skipping any (retuning null or not retuning a value would just make null and undefined values show up where the value supposed to be removed was).

answered May 04 '22 at 16:55

Hotwer

150
9

Thank you!!. I tried the filter to set state like this `setFileSize(fileSize => { return Object.entries(fileSize).filter(([key, value]) => key!=index) });` But now I am getting the output in this way `0: ['0', 13264] 1: ['2', 69432]`. Can you please tell me what I am doing wrong? – Sanjana Ekanayake May 04 '22 at 17:47
The filter function receives the key index of the list element in the second argument, not the first, so you would call like this `.filter((element, key) => key != index)` not sure why you're using square brackets in the function declartion, you can dismiss those. – Hotwer May 04 '22 at 18:01
I tried this way but still get the same output – Sanjana Ekanayake May 05 '22 at 02:50

Marios Nikolaou · Answer 2 · 2022-05-05T05:29:48.403

1

Check my answer, I used foreach() and if key == index delete object property. Tested.

Updated.

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

Object.entries(fileSize).forEach(([key, value]) => {
  //delete object index key
  if(key == index){ 
    delete fileSize[key];
  };
  
  //the rest iterations after index delete, move up the key value pairs
  if(key > index){
    Object.assign(fileSize,{[key-1]: value});
    delete fileSize[key];
  }
});

console.log(fileSize);

edited May 05 '22 at 05:29

answered May 04 '22 at 18:44

Marios Nikolaou

1,326
1
13
24

Thanks you Marios. According your output index 2 key-value pair will be completely removed. But what I want is replace the value of key 2 with the value of key 3.So final output would be like `{0 : 39768, 1 : 13264, 2 : 789}` As I mentioned in the question I want to shift up the values from the index . – Sanjana Ekanayake May 05 '22 at 02:49
@SanjanaEkanayake check my updated answer. – Marios Nikolaou May 05 '22 at 05:12
Thank you Marios. This gives the result the way that I exactly want – Sanjana Ekanayake May 05 '22 at 07:01

Yosvel Quintero · Accepted Answer · 2022-05-05T05:25:34.550

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)

edited May 05 '22 at 05:25

answered May 05 '22 at 05:19

Yosvel Quintero

18,669
5
37
46

1

Thank you Yosvel. Such a great answer with few lines!! – Sanjana Ekanayake May 05 '22 at 07:02

update the array of object using useState hook

3 Answers3