react - adding item to array in state at a specific index

Question

I have an app im building in reactjs and react native. I have an array in my state that I'm adding image uri's to.

state = {
  images: []
}

The problem lies in that I want to add images uris to this array at a specific index like this

//pass the index I want the image uri assigned to

pickImage = (imageIndex) => {
  let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [4, 3],
  });

  if (!result.cancelled) {
      this.setState({images[imageIndex]: result.uri})
  }

}

however, the above doesn't work, can someone point me in the right direction?

Thanks

@juicy89 Yes {images[imageIndex]: result.uri} is not a valid object literal. — Arup Rakshit
– Arup Rakshit, Commented Jul 9, 2018 at 20:04
Both your answers worked perfectly as expected. Without sounding ridiculous, is one preferred over the other in a general sense? I only ask as I'm still relatively new to JS — juicy89
– juicy89, Commented Jul 9, 2018 at 20:11

Arup Rakshit · Accepted Answer · 2018-07-09 20:01:44Z

5

Use Array.splice method.

this.setState(prevState => {
  const { images } = prevState;
  images.splice(imageIndex, 0, result.uri);
  return images;
})

answered Jul 9, 2018 at 20:01

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

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

Comments

Colin Burke · Accepted Answer · 2018-07-09 20:01:09Z

2

It looks like you're trying to modify state somewhat directly. Try this instead:

pickImage = (imageIndex) => {
  let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [4, 3],
  });

  const images = { ...this.state };
  images[imageIndex] = result.uri;

  if (!result.cancelled) {
      this.setState({ images })
  }

answered Jul 9, 2018 at 20:01

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Comments

Sam Elliott De La Torre Babá · Accepted Answer · 2018-07-09 20:22:49Z

1

A new array should be created with a different value in that index. We want to make a new array because it is an antipattern to mutate state. The new array can be created by making a copy of this.state.images and modifying the value at the specific index.

const copyOfImages = [...this.state.images];
copyOfImages[imageIndex] = newValue;
this.setState({images: copyOfImages});

Array.prototype.map can be leveraged to make this code a bit more functional.

this.setState(previousState => ({
  images: previousState.images.map(
    (image, index) => index === imageIndex ? result.uri : image
  );
});

edited Jul 9, 2018 at 20:22

answered Jul 9, 2018 at 20:16

Sam Elliott De La Torre Babá

932 silver badges6 bronze badges

Collectives™ on Stack Overflow

react - adding item to array in state at a specific index

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related