CODEWITHSUNDEEP
react-native
developer
developer

Reputation: 229

Remove item from a list in react-native

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?

Upvotes: 0

Views: 142

Answers (1)

sdkcy
sdkcy

Reputation: 3548

You need to bind handleExistGroup() function with this in your constructor.

constructor(props) {
    super(props);
    this.handleExistGroup = this.handleExistGroup.bind(this);
}

Upvotes: 1

Related Questions