How to add multiple Objects to an empty array react after getting response from Api react

Question

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} />

What is the current output when you run it?

Mohamad Ghaith Alzin
– Mohamad Ghaith Alzin

2022-05-25 03:50:51 +00:00
Commented May 25, 2022 at 3:50 — Mohamad Ghaith Alzin
– Mohamad Ghaith Alzin, Commented May 25, 2022 at 3:50

Nicholas Tower · Accepted Answer · 2022-05-25 03:53:19Z

2

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}]);

answered May 25, 2022 at 3:53

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add multiple Objects to an empty array react after getting response from Api react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related