How to delete a ToDo Item onClick in React?

Question

I\'m doing a simple todo app with React, just to practise. How can I delete a list item, when clicking on it?

Here is my todos.js

export default cla         


        

Answer 1

Only thing to do is to move todos to state in TodoList and pass the index of the current todo in to the removeItem method. Then splice it as you suggested.

In TodoList:

constructor(props) {
    super(props);

    this.state = { todos: props.todos };
}

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

render() {
    return(
        

            { this.state.todos.map((todo, index) => {
                return 
 { this.removeItem(index)}} key={todo}>{ todo }
            })}
        
    );
}

Remove item courtesy of Removing element from array in component state