Merge pull request #8 from GSG-G9/components

fix delete function

src/App.js

@@ -10,11 +10,11 @@ function App() {
   const todoList = useSelector(selectTodoList);
   return (
     <div className="app__container">
-      <div className="app__todoContainer">
+      <ul className="app__todoContainer">
         {todoList.map((item) => (
-          <TodoItem text={item.text} done={item.done} id={item.id} />
+          <TodoItem text={item.text} done={item.done} id={item.id} key={item.id} />
         ))}
-      </div>
+      </ul>
       <AddTodo />
     </div>
   );

src/components/TodoItem/index.js

@@ -9,19 +9,18 @@ const TodoItem = ({ text, done, id }) => {
   };
 
   const handleClick = () => {
-    console.log(  dispatch(deleteTodo(id)));
+    console.log(dispatch(deleteTodo(id)));
     dispatch(deleteTodo(id));
   };
   return (
-    <div className="todoItem">
+    <li className="todoItem">
       <input type="checkbox" checked={done} onChange={handleCheck} />
-      <span>
-        <p className={done && 'todoItem--done'}>{text}</p>
-        <button type="button" onClick={handleClick}>
-          delete
-        </button>
-      </span>
-    </div>
+
+      <span className={done ? 'todoItem--done' : null}>{text}</span>
+      <button type="button" onClick={handleClick}>
+        delete
+      </button>
+    </li>
   );
 };
 

src/features/todoSlice.js

@@ -23,7 +23,13 @@ const todoSlice = createSlice({
       });
     },
     deleteTodo: (state, action) => {
-      state.todoList.filter((item) => action.payload !== item.id);
+      const { todoList } = state;
+      const deleted = todoList.filter((item) => item.id !== action.payload);
+
+      return {
+        ...state,
+        todoList: deleted,
+      };
     },
   },
 });