this.setState is not pushing items into an array when using a for loop in React

Question

How can I transfer individual items from one array into another using react?

I have an array of items in state I created, but I need to send them one by one into another state. What's the best way to do this? I tried callback functions and I'd rather not use setTimeone.

state = { imageChosen: [] };    

// Choose multiple images to upload
fileSelectedHandler = event => {
    let tmp = [];
    for (let i = 0; i < event.target.files.length; i++) {
      tmp.push(event.target.files[i])
    }
    this.setState({ imageChosen: tmp }, () => this.uploadMedia());
  }
  // Add chosen images to the media chosen array
  uploadMedia = () => {
    for (let i = 0; i < this.state.imageChosen.length; i++) {
      this.setState({ 
        mediaChosenArr: [...this.state.mediaChosenArr, this.state.imageChosen[i]],
        displayMediaChosenArr: [...this.state.displayMediaChosenArr, URL.createObjectURL(this.state.imageChosen[i])],
        imageChosen: [],
      });
    }
    document.getElementById("mediaPlaceholder").value = '';
  };

kyun · Accepted Answer · 2019-10-10 04:14:14Z

2

using setState() with for-loop is not recomendable.

EDITED

fileSelectedHandler = event => {
  let mediaChosenArr = [];
  let displayMediaChosenArr = [];
  for (let i = 0; i < event.target.files.length; i++) {
    mediaChosenArr.push(event.target.files[i]);
    displayMediaChosenArr.push(URL.createObjectURL(event.target.files[i]);
    });
  }
  this.setState({
    mediaChosenArr: mediaChosenArr,
    displayMediaChosenArr: displayMediaChosenArr
  });
  document.getElementById("mediaPlaceholder").value = ''; // It seems not good.
}

edited Oct 10, 2019 at 4:14

answered Oct 10, 2019 at 2:22

kyun

10.4k9 gold badges36 silver badges79 bronze badges

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

3 Comments

Matt Brody Over a year ago

Can you take a look at the update I just made and let me know if there's a way to do this?

Matt Brody Over a year ago

What can I do if the mediaChosenArr and displayMediaChosenArr states already have content in their array that I need to append to?

Matt Brody Over a year ago

NVM, I got it. I just needed to push the existing state into those initial variables. Thanks so much for the help!

ryandrewjohnson · Accepted Answer · 2019-10-10 02:31:54Z

0

Avoid calling setState from inside a loop as each call to setState will result in a render.

Instead assemble the imageChosen array first, and then pass it to setState. Also since you're not modifying the files array you should just be able to pass it directly to setState without looping through it.

Also keep in mind state updates may be asynchronous

fileSelectedHandler = event => {
  const files = event.target.files;
  this.setState(
}

answered Oct 10, 2019 at 2:31

ryandrewjohnson

5553 silver badges7 bronze badges

Comments

Giang Huynh · Accepted Answer · 2019-10-10 02:33:38Z

0

You can using template array.

state = { imageChosen: [] };    

fileSelectedHandler = event => {
   let tmpArray = [...imageChosen];
   for (let i = 0; i < event.target.files.length; i++) {

     tmpArray.push(event.target.files[i]);

     console.log(event.target.files[i])
   }

   this.setState({imageChosen: tmpArray})

 }

answered Oct 10, 2019 at 2:33

Giang Huynh

12 bronze badges

Comments

tim · Accepted Answer · 2019-10-10 03:26:41Z

0

You can do this several ways, here is one with forEach.

const initialArray = ['one.png','two.png','three.png']
this.state = { imageChosen: [] }; 
let {imageChosen} = this.state
initialArray.forEach(insertImages);

function insertImages(value) {
 this.setState({imageChosen: value})
}

answered Oct 10, 2019 at 3:26

tim

7471 gold badge10 silver badges12 bronze badges

Collectives™ on Stack Overflow

this.setState is not pushing items into an array when using a for loop in React

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related