React does not delete item from array

Question

I'm creating a simple todo app in React. I have three components. The 'Items' component is in charge of displaying and deleting items from the list. When I click on the 'Done' button next to an item, the index of the item is getting logged to the console but not getting deleted. My code is as follows,

//App.js
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {list:[]}
    this.addItem = this.addItem.bind(this)
    this.handleRemove = this.handleRemove.bind(this)
  }

  addItem(val) {
    let updated = [...this.state.list, val];
    this.setState({ list: updated });
  }
  
  handleRemove(key){ 
    const list = [...this.state.list]; 
  
    const updateList = list.filter(item => item.id !== key); 
  
    this.setState({ 
      list:updateList, 
    }); 
  
  } 

  render(){
    return (
    <div className="App">
      <Title itemCount={this.state.list.length}></Title>
      <Add addItem={this.addItem}></Add>
      <Items items={this.state.list} remove={this.handleRemove}></Items>
    </div>
  );
  }
  
}

//Items.js
const Items = ({items, remove}) => {
    return(
        <div className="Items">
            <ul>{items.map((item, index) => 
                <li key={index}>
                    {item}
                    <button onClick={() => remove(index)}>Done</button>
                </li>
                )}
            </ul>
        </div>
    );
}

What can I do to fix this? Thanks in advance!

what's the content of the items? Can you share the data structure? — K K, Oct 03 '20 at 12:55
Check for string and number comparison. There is a possibility that a string is being compared with a number in filter function — K K, Oct 03 '20 at 12:58
Are you sure that the `item.id` and `key` have the same value and data type? And did you console.log the `updateList`? — Shuvo, Oct 03 '20 at 13:00
When I console.log(item.id), i get undefined while updateList has no changes after filtering. — Mohnish M, Oct 03 '20 at 13:10
@MohnishM what is `item` inside of `list`? Some sort of object you've defined? Or is it a string? - strings don't have an id property on them — Nick Parsons, Oct 03 '20 at 13:14
@Nick Parsons Yes, I realized that some time ago... I'm trying to figure out a way to delete items without using item.id. — Mohnish M, Oct 03 '20 at 13:16
If I understand correctly, you're trying to delete using the index, you can try something like `const updateList = list.filter((_, i) => i !== key)` - while using `remove(index)` — Nick Parsons, Oct 03 '20 at 13:18

score 1 · Answer 1 · answered Oct 03 '20 at 13:11

1

You are not passing the id to the callback in Items component

<button onClick={() => remove(index)}>Done</button>

should be

<button onClick={() => remove(item.id)}>Done</button>

answered Oct 03 '20 at 13:11

mosmk

403
2
7

This is deleting the items but all of them. How do I get them to delete the item I have clicked? – Mohnish M Oct 03 '20 at 13:14

React does not delete item from array

1 Answers1