Tmp array not properly added to state variable - React - Hooks - arrays

Question

The newArray i create and push url's to, is not added properly to my state variable (propFiles)
const [propFiles, setPropFiles] = useState([]);
useEffect(() => {
let newArray = [...propFiles];
data?.forEach((element) => {
element?.images?.forEach((el) => {
storageRef
.child(element.firebaseRef + "/" + el)
.getDownloadURL()
.then((url) => {
console.log(url) // this returns url's like "https://firebase/my-picture.jpg"
newArray.push(url);
console.log(newArray) // this updates the array as expected so the result of newArray is ok
setPropFiles(...propFiles, newArray) // This is where something goes wrong
});
});
});
}, [data]);
useEffect(() => {
console.log(propFiles); // The complete array values (of newArray) are not transfered proper to state. Only the first 2 url's are
}, [propFiles]);
So after each console.log you can find my information about what is going on.
As you can see, if i try to log propFiles, it only shows me the to 2 first elements of the foreach loop, not the complete newArray that was made.
Can someone please explain to me what would be the right approach to set state equal to the complete newArray that was made?
UPDATE To be extra clear about the outcomes of newArray and propFiles
This is what newArray looks like after the foreach:
[
0: "https://firebase/my-picture-1.jpg",
1: "https://firebase/my-picture-2.jpg",
2: "https://firebase/my-picture-3.jpg",
3: "https://firebase/my-picture-4.jpg",
4: "https://firebase/my-picture-5.jpg",
5: "https://firebase/my-picture-6.jpg",
6: "https://firebase/my-picture-7.jpg",
7: "https://firebase/my-picture-8.jpg",
8: "https://firebase/my-picture-9.jpg",
9: "https://firebase/my-picture-10.jpg",
10: "https://firebase/my-picture-11.jpg",
11: "https://firebase/my-picture-12.jpg",
]
So an array with 11 url (or strings) inside of it
This is what propFiles look like after it is set equal to newArray:
[
0: "https://firebase/my-picture-1.jpg",
1: "https://firebase/my-picture-2.jpg"
]
So an array with just 2 urls (or strings) inside of it.
How could this be possible?
Thanks in advance

Answer 1

propFiles state is an array and hence you are updating it, you should set an array back but you are setting comma separated values
Correct way to update it would be
setPropFiles(newArray)
since you have already used the propFiles while initialising the newArray
However, another thing to note is that you are looping over elements and updating state, it is always better to get the final updated array and update it only once. The way to do it would be to map over the items and use Promise.all
const [propFiles, setPropFiles] = useState([]);
useEffect(() => {
const promises = data?.map((element) => {
return element?.images?.map((el) => {
return storageRef
.child(element.firebaseRef + "/" + el)
.getDownloadURL()
.then((url) => {
console.log(url) // this returns url's like "https://firebase/my-picture.jpg"
console.log(newArray) // this updates the array as expected so the result of newArray is ok
return url
});
});
}).filter(Boolean); // remove all undefined values
// flatten the promise array since we have nested maps
const promisesArr = promises?.flat();
promisesArr && Promise.all(promisesArr).then(newArray => {
setPropFiles(prevPropsFiles => [...prevPropsFiles, ...newArray])
})
}, [data]);