CODEWITHSUNDEEP
react-native
TheGabornator
TheGabornator

Reputation: 551

How can I delete a single item from a list in React Native?

So that's what my render list looks like:

renderEvent(){
return this.props.eventList.map(listedEvent=>
    <CardSection key={listedEvent._id}>

      <EventListItem>
      {listedEvent.eventName}
      </EventListItem>

      <DeleteButton
      onClick={this.deleteEvent(listedEvent._id)}
      key={listedEvent._id}
      />

    </CardSection>
  );
    }

and here the rendering of the whole list

render(){

if (this.props.eventList !== undefined) {
  return(
        <Card>
          {this.renderEvent()}
        </Card>
        )
}else{
  return(
        <View>
        <Spinner/>
        </View>
        )
      }
    }
  }

So far so good, the list and the delete button appear correctly, yet when I try to delete one line, it addresses all. I created my event handler which for now, only logs the passed id.

deleteEvent(eventID){
console.log(eventID)
}

Yet when called, it logs all the _ids on the list. What am I doing wrong? How can I make sure I'm passing one single id of the list item I'm clicking on? Thank you!

Upvotes: 0

Views: 1251

Answers (1)

bennygenel
bennygenel

Reputation: 24660

Problem is that you are rather than passing a deleteEvent function to onClick prop you are executing it. This causes to deleteEvent fire for each item while rendering.

You can sort this out by changing this,

onPress={this.deleteEvent(listedEvent._id)}

to this

onPress={() => this.deleteEvent(listedEvent._id)}

This will also assure that deleteEvent is bind with this.

Upvotes: 1

Related Questions