React Native - Delete item from array with Key

Question

I have an array of image uri's which are presented in the UI as follows:

{this.state.ADImageArray.map((prop, key) => {

   return (
     <View style={PhotoStyles.imgThumbnailBlock}>
      <Image
        source={{uri: prop, isStatic: true}}
        style={PhotoStyles.imgThumbnail}
        />
        <TouchableOpacity onPress={this.removephoto} style={PhotoStyles.removePhotoLnk}>
          <Image
            source={require('../images/icons/ico-removeImg.png')}
            style={PhotoStyles.removePhotoImg}
          />
        </TouchableOpacity>
    </View>
   );
})}

I want an image to be removed from the array whenever the orange delete button is clicked.

I have the this.removephoto action ready - but wonder how can i remove a particular image in this context - is it possible to remove the image by key?

harisu · Accepted Answer · 2019-09-25 21:53:49Z

5

Yes it's possible for you to remove the item using it index. So your removephoto function can be of the form

removephoto = (index) => {
   let result = this.state.ADImageArray.filter((item, key) => key != index)
   this.setState({ADImageArray: result})
}

then you call it as follows

   <TouchableOpacity onPress={() => this.removephoto(key)} style={PhotoStyles.removePhotoLnk}>

Or alternatively you can remove the link by its url you just need to change the implimentation of the removephoto() function to the one below

removephoto = (url) => {
   let result = this.state.ADImageArray.filter((item, key) => item != url)
   this.setState({ADImageArray: result})
}

and then you call it as follows

   <TouchableOpacity onPress={() => this.removephoto(prop)} style={PhotoStyles.removePhotoLnk}>

edited Sep 25, 2019 at 21:53

answered Sep 25, 2019 at 21:48

harisu

1,44410 silver badges18 bronze badges

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

Comments

Danny Buonocore · Accepted Answer · 2019-09-25 21:57:28Z

1

You can pass key to your click handler like so

<TouchableOpacity onPress={() => this.removephoto(key)}>

Be aware that this will create a new function each time, so for performance reasons it's better to bind the handler, like so:

<TouchableOpacity onPress={this.removephoto.bind(this, key)}>

Then your handler looks something like

removephoto = (key) => {
  const { ADImageArray } = this.state;
  this.setState({
    ADImageArray: ADImageArray.filter((item, i) => i !== key)
  });
}

Check out this working Expo snack

edited Sep 25, 2019 at 21:57

answered Sep 25, 2019 at 21:44

Danny Buonocore

3,7774 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

React Native - Delete item from array with Key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related