I am uploding 4 images in response i am getting 4 urls one by one save 4 urls in 4 diffrent objects
const [multiStatement, setMultiStatement] = useState([])
const multipStatement = async(e) => {
const files = e.target.files
for (let i = 0; i < files.length; i++) {
const url = await uploadStaement(files[i])
console.log(url)
setMultiStatement([...multiStatement, {type:"document", frontBack:"front", url:url}])
}
}
<input type="file" id="file" multiple name="file" onChange={multipStatement} />
Every time through the loop you are overwriting the work you did before. If multiStatement was an empty array when this started, then you first set the state to empty array + object with url 0, then empty array + object with url 1, and so on. At the end, the only one that sticks is empty array + object with the last url.
To fix this, use the function version of setMultiStatement, so you are always working with the latest state:
setMultiStatement(prev => [...prev, {type:"document", frontBack:"front", url:url}]);