Removing Item from API / Array in reactJS

Question

I am trying my best to remove an item from my array.

I have attempted to filter it as following:

removeContact(contact) {
this.setState({
   contacts: this.state.contacts.filter((_, i) => i !== contact)
 }); }

But that doesnt seem to do the trick.

My contact is listed in an unordered list like this:

<ul className="list-group">
        {this.state.contacts.map(((contact, index) =>
          <li className="list-group-item" key={`${contact.contact}${index}`}>
            {contact.name} | {contact.phone} | {contact.countryId} <button  onClick={this.removeContact}>Delete</button>
          </li>
          ))
        }

      </ul>

But by clicking remove it just throws an error:

TypeError: Cannot read property 'setState' of undefined

The list to render the contacts from the api works.

Possible duplicate of [How to remove item from array by value?](https://stackoverflow.com/questions/3954438/how-to-remove-item-from-array-by-value) — Hardik Modha, Oct 24 '18 at 16:38
need more information. What is a type of contact? and how does it not work? — ZeroCho, Oct 24 '18 at 16:39
Use an arrow function, change `removeContact() {}` to `removeContact = () => {}` — Dan, Oct 24 '18 at 16:42
You are setting this.state.data - but trying to map this.state.contacts. Did you mean to setState on the 'contacts' key? Additionally - @Dan is on the right track. You either need to bind 'this' in constructor or use an arrow function. — LukeT, Oct 24 '18 at 16:44
That fixed the error @Dan but it doesnt seem to remove the contact — Patrick Ziebell Thøgersen, Oct 24 '18 at 16:44
Yes @LukeT Fixed it along with Dans answer - it just doesnt remove the contact — Patrick Ziebell Thøgersen, Oct 24 '18 at 16:47

score 3 · Accepted Answer · answered Oct 24 '18 at 16:49

3

removeContact = (index) => () => {
  this.setState({
    contacts: this.state.contacts.filter((_, i) => i !== index)
  }); 
}

I guess you want this. You have to inject index to use inside event listener.

<button onClick={this.removeContact(index)}>

answered Oct 24 '18 at 16:49

ZeroCho

1,259
9
19

Removing Item from API / Array in reactJS

1 Answers1