0

I have an array of images that i set in a state.

  const [imagesArray, setImagesArray] = useState(["base64code1","base64code2","base64code3" etc etc);

I am then mapping through this array and showing the images. I want to be able to click on the image, which then calls a function - imageDelete.

<View style={{display: 'flex', flexDirection: 'row'}}>
  {imagesArray.map((title, key) => (
    <TouchableOpacity
      onPress={() => {
        imageDelete(key);
      }}>
      <Image
        source={{
          uri: `data:image/jpeg;base64,${title}`,
        }}
        style={{height: 100, width: 100, margin: 5}}
      />
    </TouchableOpacity>
  ))}
</View>

I want imageDelete to setImagesArray with a new array that doesn't include the record in the array with the key that was sent into imageDelete(key).

This is what i have, but it's not working..

  function imageDelete(key) {

    setImagesArray(imagesArray => imagesArray.filter(image => image.key !== key))

  }
  • 2
    Your _key_ is the index in the array. Try `imagesArray.filter((_, i) => i !== key)` – Phil Jan 11 '23 at 23:02

0 Answers0