React native: Delete a item from an array

Question

I'm trying to remove an item from an array.

Let's say I have an array of 5 items: [0,1,2,3,4] If I delete item number five [4], it works fine. But if I delete item [1], object [2,3,4] is also deleted. So what am I doing wrong?

This function added a new draggable item

  const addshootOutside = index => {
    setShootOutside([
      ...shootOutside,
      <Outside key={index} pageX={positionX} pageY={positionY}/>,
    ]);
  };

This function delete a draggable item

  const deleteHandler = index => {
    const arr = shootOutside.filter((el, i) => index !== i)
    setShootOutside(arr);
  };

Here I call the "deleteHandler"

  const twoOptionAlertHandler = () => {
    //function to make two option alert
    Alert.alert(
      //title
      'Ta bort',
      //body
      'Är du säker på att du vill ta bort skott?',
      [
        { text: 'OK', onPress: (index) => deleteHandler(index) },
        {
          text: 'Avbryt',
          onPress: () => console.log('No Pressed'),
          style: 'cancel',
        },
      ],
      { cancelable: false }
      //clicking out side of alert will not cancel
    );
  };

Here is the my draggable item.

  console.log(shootOutside);
  const Outside = () => {
    return (
      <Draggable
        x={200}
        y={200}
        onShortPressRelease={twoOptionAlertHandler}
        renderSize={20}
        renderColor="red"
        renderText="x"
        isCircle
        onDragRelease={e => {
          setPositionY(e.nativeEvent.pageY);
          setPositionX(e.nativeEvent.pageX);
        }}
      />
    );
  };

look into Array.prototype.shift() or https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array — D3PSI, Aug 18 '21 at 21:41
@Alexander you need to call deleteHandler with an index as parameter — Rilla, Aug 18 '21 at 21:41
From the onPress method at Alert.alert ```deleteHandler``` is being called without an index. hence deleting everything in the array — Rilla, Aug 18 '21 at 21:43
Mm okey, I updated my code, but it still doesn't works. How should I get the index? — Alexander, Aug 18 '21 at 23:30

score 1 · Answer 1 · answered Aug 18 '21 at 21:50

1

@Alexander you need to call deleteHandler with an index as parameter.

From the onPress method at Alert.alert in twoOptionsHandlerAlert deleteHandler is being called without an index. hence deleting everything in the array

I am sure how your app work passing an index as parameter should work fine For Instance At Alert.alert in twoOptionsHandlerAlert. Try This:

const twoOptionAlertHandler = () => {
//function to make two option alert
Alert.alert(
  //title
  'Ta bort',
  //body
  'Är du säker på att du vill ta bort skott?',
  [
    { text: 'OK', onPress: () => deleteHandler(indexToDeleteHere) },
    {
      text: 'Avbryt',
      onPress: () => console.log('No Pressed'),
      style: 'cancel',
    },
  ],
  { cancelable: false }
  //clicking out side of alert will not cancel
);

};

Where indexToDeleteHere is an index in the array of items to be deleted

answered Aug 18 '21 at 21:50

Rilla

505
4
16

M, thanks for your answer. I feeling so stupid, but how can get the index? I have been try a lot ways, but there is something I doing wrong. I updated my code. – Alexander Aug 18 '21 at 22:37
You are welcome,It depends on how you want the deletion to work. please could you explain a little on how the deletion to work. For instance you take an input from the user and use as index or set a constant value as index which would delete a particular index every time deleteHandler is triggered – Rilla Aug 18 '21 at 22:51
I take a value from the user. When the user presses a button, a draggable object is created with the function (addshootOutside). If the user wants to delete a specific draggable object, the user selects the object and an alert is displayed and where the user confirms his choice. Was it well explained? – Alexander Aug 18 '21 at 23:03

React native: Delete a item from an array

1 Answers1