Push Object to array in react useState hook

Question

I am declaring react state as below

const [selectedFiles, setselectedFiles] = useState([]);

Using them in function as below

function handleAcceptedFiles(files) {
    files.map((file) =>
      Object.assign(file, {
        preview: URL.createObjectURL(file),
        formattedSize: formatBytes(file.size),
      })
    );
    setselectedFiles(files);
  }

I am trying to add as below but not working

selectedFiles.length === 0 ? setselectedFiles(files) : setselectedFiles(oldFiles => [...oldFiles,files])

but it did not help me.

Does this answer your question? [Correct modification of state arrays in ReactJS](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs) — Emile Bergeron, Aug 26 '20 at 17:22
Please include a [mcve] and a clear description of what's happening. — Emile Bergeron, Aug 26 '20 at 17:22

score 0 · Answer 1 · answered Aug 26 '20 at 17:08

You might have setselectedFiles with the same reference on the previous array, which lead to no changes, so clone it to a new array (I clone by spreading)

function handleAcceptedFiles(files) {
  files.map((file) =>
    Object.assign(file, {
      preview: URL.createObjectURL(file),
      formattedSize: formatBytes(file.size),
    })
  )
  setselectedFiles([...files])
}

score 0 · Accepted Answer · answered Aug 26 '20 at 17:13

You are doing setselectedFiles(oldFiles => [...oldFiles,files])

which will add the array as a new element to the existing array something like this

let array = [1,2,3];
let array2 = [4,5,6];

let output= [...array,array2]
console.log(output) // [1,2,3,[4,5,6]]

// change the output which concat 2 arrays using spread 
output= [...array,...array2];

console.log(output) // [1,2,3,4,5,6]

so for your solution replace

setselectedFiles(oldFiles => [...oldFiles,files])

by

setselectedFiles(oldFiles => [...oldFiles,...files])

yes... use ```[...new Set(YOUR_ARRAY)]``` or if you are dealing with array of objects use ```[...new Set(YOUR_ARRAY.map(JSON.stringify))].map(JSON.parse)``` ... this is not the best answer though you will get your unique values in the array. — Anup, Aug 27 '20 at 04:09

Push Object to array in react useState hook

2 Answers2