How to append to a previous state array while executing an arrow function inside setState?

Question

I am trying to append file(s) to previous file state when drag and dropping image(s) to React-Dropzone library.

 const [files, setFiles] = useState([])

...
const { 
        getRootProps, 
        getInputProps,
        isFocused,
        isDragAccept,
        isDragReject, 
    } = useDropzone({
        accept: "image/*",
        onDrop: (acceptedFiles) => {
           setFiles(acceptedFiles.map((file) => Object.assign(file, {
                preview: URL.createObjectURL(file)
            })))
        }
    })

In the "onDrop", I map the accepted files and append the new array using setFiles. However, using this resets the whole array and previous images are lost. I want to append the images. I've tried doing:

setFiles([...files, acceptedFiles.map((file) => Object.assign(file, {
                preview: URL.createObjectURL(file)
            }))])

But this returns nothing and gives me no images at all.

Answer 1

When appending to an array in React state it can be very convenient to use the functional update form of useState - which is just a fancy way of saying you'll write an arrow function like this:

   setFiles((oldArrayofFiles) => {
     return [...oldArrayOfFiles, newFile];
   })

This also prevents the problem that I think you're seeing, where because you supply onDrop as a function, you're closing over the files when it's still an empty array. So in your case (and forgive me, I haven't tested this with React-Dropzone) this should work:

useDropzone({
  accept: "image/*",
  onDrop: (acceptedFiles) => {
    setFiles((previousFiles) => {
      const newFiles = acceptedFiles.map((file) => Object.assign(file, {
        preview: URL.createObjectURL(file)
      }));

      return [...previousFiles, ...newFiles];
    });
  });

I might have messed up a bracket or three ... but you get the idea :-)