Deleting a specific item on a list with react js
Clash Royale CLAN TAG#URR8PPP
Deleting a specific item on a list with react js
So I am trying to remove a todo item from its current array and it is not working. When server starts, I tried console.log but no argument is being passed.
Todos returns an array .
Here's my code:
handleTodoDelete = (deleteTodo) =>
const remainingItems = this.state.todo.filter (todo =>
return todo !== deleteTodo;
);
this.setState(
todos: remainingItems
);
My return code has this:
return (
<li
className=completeClass
onClick=() => this.handleTodoClick(todo)>
todo.description
<button onClick=
(todo)=>this.handleTodoDelete(todo)>delete</button>
</li>
todo
todos
todo
todos
it works when im passing thru ... :( done !=isdone - {this.state.todos.map(todo => { let completeClass = ""; if (todo.isDone) completeClass = "complete"; return ( <li className=completeClass onClick=() => this.handleTodoClick(todo) > todo.description
– user2626540
Aug 13 at 2:36
if
this.state.todos.map is working, maybe try this.state.todos.filter. You have this.state.todo.filter which is todo singular instead of plural. Does that make sense?– skylerfenn
Aug 13 at 2:38
this.state.todos.map
this.state.todos.filter
this.state.todo.filter
2 Answers
2
Try to do:
const remainingItems = this.state.todos.filter (todo =>
return todo !== deleteTodo;
);
this.setState(
todos: remainingItems
);
Or try to do:
const remainingItems = this.state.todo.filter (todo =>
return todo !== deleteTodo;
);
this.setState(
todo: remainingItems
);
It seems like you want to use todos or todo in state and not both.
todos
todo
Here is some working code with a filter maybe it'll help you have a reference to compare:
const app = document.querySelector('#app');
const todoOne = id: 1, description: "Code this." ;
const todoTwo = id: 2, description: "Make that." ;
const todos = [
todoOne,
todoTwo,
];
const todoToRemove = todoOne;
const removedTodos = todos.filter(
(todo) => todo.id != todoToRemove.id
)
app.innerHTML = `
<p>To Dos (Original): <br>$JSON.stringify(todos)</p>
<p>To Dos (Deleted): <br>$JSON.stringify(removedTodos)</p>
`;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Snippet</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
it still wont delete when i changed it to "this.state.todos.filter"
– user2626540
Aug 13 at 2:42
You likely want your state to match, but that may be a different issue.
todo !== deleteTodo is comparing objects instead of values. Could you compare and id instead? todo.id !== deleteTodo.id– skylerfenn
Aug 13 at 2:45
todo !== deleteTodo
todo.id !== deleteTodo.id
still does not work :(
– user2626540
Aug 13 at 2:51
You should always create another list or object when changing list or object in react redux application.
and the best way to do it, is via spread operator.
handleTodoDelete = (deleteTodo) =>
let state = this.state;
let newTodo = [...state.todo.filter(todo => todo.id !== deleteTodo.id)];
state.todo = newTodo;
this.setState( state );
Thanks for your answer. Would you mind adding some clarifying or explanatory text to your code?
– ggorlen
Aug 13 at 5:35
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
It's seems that you're setting the filtering the
todoarray in state, but you're settingtodos. Should you just be messing withtodoortodos?– skylerfenn
Aug 13 at 2:34