Remove item from a list in react-native - react-native

Question

I'm displaying a list of items on a page which i provide users the ability to delete.
With my code when the users taps on delete i get this error
undefined is not an object (evaluating this.state.myGroups)
JS
handleExistGroup(item) {
var array = [...this.state.myGroups];
var index = array.indexOf(item.target.value)
if (index !== -1) {
array.splice(index, 1);
this.setState({myGroups: array});
}
}
Array
state = {
myGroups : [
{
name: 'Karate Group',
description: 'Test Group',
icon: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
},
{
name: 'Choir Group',
description: 'Test 2',
icon: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
}
]
}
VIEW
<View style={styles.container}>
<ScrollView >
{
groupList.map((item, i) => {
return (
<View key={i} style={styles.user}>
<Card >
<ListItem
roundAvatar
title={item.name}
avatar={{uri:'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'}}
/>
<View>
<Button
containerViewStyle={{width:'50%', alignSelf:'flex-end', position:"absolute", top:0, right:-25}}
onPress={()=>(handleExistGroup(item))}
rounded = {true}
style={{margin:10}}
icon={{name: 'trash'}}
backgroundColor='#DC143C'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
title='Exit Group'
/>
</View>
<Text style={{alignSelf:'center', padding:5, fontFamily:'HelveticaNeue-Light', fontSize:16}}>
Jonied: 24th January, 2019
</Text>
</Card>
</View>
);
})
}
</ScrollView>
</View>
How do i make it work so it can delete the particular row a use want to delete from the array?

Answer 1

You need to bind handleExistGroup() function with this in your constructor.
constructor(props) {
super(props);
this.handleExistGroup = this.handleExistGroup.bind(this);
}