Delete multiple elements from List on React Native

Question

I am currently trying to remove from a list when I press a button. I have tried this:

const [currentSelection, setCurrentSelection] = useState([]); 
const [removeSelection, setRemoveSelection] = useState([]);  

function handleRemoveMeal() {
   currentSelection = setCurrentSelection(currentSelection.filter((item)
   => !removeSelection.includes(item)));
}

but, I get a currentSelection is read-only error. I am able to properly store all of the elements in both currentSelection and removeSelection, so I am a bit stuck. If I can get some help, I would much appreciate it!

Edit: I have also tried using splice, but my list does not update.

  for (var i = currentSelection.length - 1; i >= 0; i--) {
    for (var j = removeSelection.length - 1; j >= 0; j--) {
        if (currentSelection[i] == removeSelection[j]) {
            setCurrentSelection(currentSelection.splice(i, 1));
        }
    }
  }

Edit 2: for more context

//meals to choose from
const meals = [
    { label: 'Bangkok Chicken Wrap', value: 21 },
    { label: 'Moo Shu Chicken', value: 25 },
    { label: 'Strawberry Gelatin', value: 43 },
    { label: 'Waffle Fries', value: 20 },
    { label: 'Firehouse Chili with Pork', value: 35 },
    { label: 'Gluten Free Cookies', value: 41 },
    { label: 'Pineapple Chunks', value: 6 },
    { label: 'Vegan Pub Fried Fish', value: 23 },
    { label: 'Brown Rice with Mushrooms', value: 47 },
]

const onFavSelectionsChange = favSelections => {
      setRemoveSelection(favSelections);
    }

            <View>
                <View style={ styles.selectMultipleView }>
                    <SelectMultiple
                      items={currentSelection}
                      selectedItems={removeSelection}
                      onSelectionsChange={onFavSelectionsChange}
                      />
                </View>
                <View style={ [styles.buttonView, {alignItems:"center"}] }>
                    <Button style={ styles.removeButtonComponent } onPress= { handleRemoveMeal }>
                        <Text style={ styles.removeButtonText }>Remove</Text>
                    </Button>
                </View>
            </View>

jnpdx · Accepted Answer · 2021-03-20T19:21:07.833

0

setCurrentSelection does the job of "setting" currentSelection (thus the name), so you don't need to also assign it with the =. Just use:

function handleRemoveMeal() {
   setCurrentSelection(currentSelection.filter(item => !removeSelection.includes(item)));
}

You may also want to use the callback version of use/set state here so that you don't end up with stale values:

function handleRemoveMeal() {
   setCurrentSelection(originalSelection => originalSelection.filter(item => !removeSelection.includes(item)));
}

Update that accounts for the way that SelectMultiple returns values:

const handleRemoveMeal = () => {
    const filtered = currentSelection.filter(item => !removeSelection.map(i => i.value).includes(item.value));
   setCurrentSelection(filtered);
  }

edited Mar 20 '21 at 19:21

answered Mar 20 '21 at 18:53

jnpdx

45,847
6
64
94

thanks for the suggestion! After doing that, I don't get the error, but my list doesn't delete the suggested items. Any other suggestions? I appreciate the help! – unsaturatedgoods1 Mar 20 '21 at 19:03
You'd have to show the relevant code. You're not showing anything about a list, so all I could address was the syntax error. Looking at your code so far, it's not really clear what the relationship between `currentSelection` and `removeSelection` is or what's included on the list. – jnpdx Mar 20 '21 at 19:04
Apologizes, I have updated my post. For more context, I have printed both my `currentSelection` and `removeSelection`, and they both print the correct elements. – unsaturatedgoods1 Mar 20 '21 at 19:09
Sorry! I forgot some pieces of code that is probably relevant. Apologizes for that – unsaturatedgoods1 Mar 20 '21 at 19:21
Updated again. I just compared the names. If you also need to compare the value field, look into https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript/14853974?noredirect=1#comment59337127_14853974 – jnpdx Mar 20 '21 at 19:21
Brilliant. Thanks so much for being patient with me my friend – unsaturatedgoods1 Mar 20 '21 at 19:31

Delete multiple elements from List on React Native

1 Answers1