I have an array of files for appending them in form data later, but first i need to compress them and append in new array of already compressed files. I'm stuck with appending files to new array in loop.
What i did tried:
const [compressedImages, setCompressedImages] = useState([]);
In loop:
setCompressedImages(...compressed) //it doesn't seem to work
one more try: (in loop)
compressedImages = [...compressed] //doesn't work
OR
compressedImages.push(compressed) //doesn't work
Why spread operator doesn't work in that case ?
What do I have
<input
type="file"
multiple
onChange={e => selectImages(e)}
/>
Function selectImages:
const [images , setImages] = useState([]);
const selectImages = e => {
setImages(e.target.files);
}
Then I need to compress my files and append them all in another array.
for (let i = 0; i<images.length; i++){
let compressed = await imageCompression(images[i], options)
images = [...compressed]
//at the end of the loop I must have exactly the same array as 'images'
//but with already processed files
}
To add an element to an array state, you should create a new array based on current state and add the new element to it, then set the new array as state:
const [myState, setMyState] = useState([]);
// Add an element to state(long way)
myState.push('element');
setMyState(myState);
// Add an element to state(short way)
setMyState([...myState, 'element']);