1

I have a simple CRUD todo list and I previously had the delete functionality working properly. However, since adding a new piece of functionality, it no longer works and I cannot figure out why?

Here is a link to the sandbox

Data

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

Delete function

deleteTask(taskToDelete) {
    this.setState(prevState => {
      const tasks = prevState.tasks.filter(task => task.name !== taskToDelete);
      return { tasks };
    });
    console.log("Deleted task: "+taskToDelete)
  }

How function is called:

<button onClick={this.handleDelete.bind(this)}>Delete</button>

handleDelete() {
    const taskToDelete = this.props.name;
    this.props.deleteTask(taskToDelete);
  }
physicsboy
  • 5,656
  • 17
  • 70
  • 119
  • in the onClick handler, how do you pass the task object to the event handler? – Mohamed El-Sayed Jan 23 '18 at 09:16
  • is this all on one component? if yes, in `handleDelete` is should be `this.deleteTask` not `this.props.deleteTask`. – Femi Oni Jan 23 '18 at 09:18
  • The title of the dupe might not seem like a dupe, but you will find an answer there. Your state updates correctly, your issue is with the reconciliation for your `list-item`. You can fix this by adding a key to the parent div of that component. Take a look at the dupe post for more info. – Chris Jan 23 '18 at 09:24
  • @Chris - I have a key set for the list-item component: ... Or are you referring to something else? – physicsboy Jan 23 '18 at 09:37
  • Setting a key there doesn't help. React won't be able to figure out which `ListItem` corresponds to which `input`. If you read the dupe I'm sure you'll figure it out as it is emphasized where to put the key there. :) – Chris Jan 23 '18 at 09:40
  • Aha! Sorted it! I would have thought putting it in the list-item would have worked - Or at least it DID work until I implemented the boolean logic around which buttons are displayed. Thanks for the pointer. – physicsboy Jan 23 '18 at 09:43
  • @physicsboy glad you figured it out :) – Chris Jan 23 '18 at 09:46

0 Answers0