My list of all is erased when I try to erase only a whole

Question

This is my list of all:

And this is what happens when I try to erase one whole:

I tried to see what the whole returned and should return an object but instead returns it:

I have this mistake too:

Here’s my App.js code:

import './App.css';
import Form from './components/Form';
import TodoList from './components/TodoList';
import React, {useState} from 'react';

function App() {
  const [inputText, setInputText] = useState("");
  const [todos, setTodos] = useState([]);
  return (
    <div className="App">
      <header>
        <div className="title">
          <h1><span suppressContentEditableWarning="true" contentEditable="true" id="name">Your name</span> todo list</h1>
        </div>
      </header>
      <Form todos={todos} setInputText={setInputText} setTodos={setTodos} inputText={inputText}/>
      <TodoList setTodos={setTodos} todos={todos}/>
    </div>
  );
}

export default App;

Here’s my Todolist.js code.:

import React from 'react';
import Todo from './Todo';

const TodoList = ( {todos, setTodos}) => {
  return(
    <div className="todo-list">
      {todos.map(todo => (
        <Todo setTodos={setTodos} todos={todos} todo={todo} key={todo.id} text={todo.text}/>
      ))}
    </div>
  )
}

export default TodoList;

Here’s my Todo.js code.:

import React from 'react';
import {BsCheck, BsTrashFill} from 'react-icons/bs';

const Todo = ({text, todos, setTodos, todo}) => {
  const deleteHandler = () => {
    console.log(`Before deleting: ${todos}`);
    setTodos([ todos.filter(el => el.id !== todo.id )]);
    console.log(`After deleting: ${todos}`);
  }

  return(
    <div className="todo">
      <p className="todo-text">{text}</p>
      <BsCheck id="check" size={30}/>
      <BsTrashFill onClick={deleteHandler} id="trash" size={30}/>
    </div>
  )
}

export default Todo;

How do I make it work?

Answer 1

I believe your mistake lies in this passage:

setTodos([ todos.filter(el => el.id !== todo.id )]);

The function filter by itself already returns an array, if you do the setTodos this way you will have a structure similar to this:

todos = [
  [{ ... }, { ... }]
]

To solve this you can use the spread operator

setTodos([...todos.filter(el => el.id !== todo.id )]);

Or just do it that way

setTodos(todos.filter(el => el.id !== todo.id ));