changes

src/App.js

 import React from "react";
 import "./App.css";
-import TodoList from "./components/TodoList";
+import TodoHome from "./components/TodoHome";
 
 function App() {
   return (
     <div className='task-main'>
-      <TodoList />
+      <TodoHome />
     </div>
   );
 }

src/components/CompletedTodos.js

 import React from "react";
 import { CgCloseO } from "react-icons/cg";
 
-const Todo = ({
+const CompletedTodos = ({
     todos,
     completeTodo,
     removeTodo,
@@ -30,4 +30,4 @@ const Todo = ({
     ));
 };
 
-export default Todo;
+export default CompletedTodos;

src/components/TodoList.js → src/components/TodoHome.js

 import React, { useState } from "react";
 import TodoForm from "./TodoForm";
-import Todo from "./Todo";
+import TodoItem from "./TodoItem";
 import Header from "./Header";
 import CompletedTodos from "./CompletedTodos"
 
-function TodoList() {
+function TodoHome() {
 
   const [todos, setTodos] = useState([]);
   const [editId, setEdit] = useState(false);
@@ -54,7 +54,7 @@ function TodoList() {
     <>
       <Header todos={todos} />
 
-      <Todo
+      <TodoItem
         todos={todos}
         completeTodo={completeTodo}
         removeTodo={removeTodo}
@@ -75,4 +75,4 @@ function TodoList() {
   );
 }
 
-export default TodoList;
+export default TodoHome;

src/components/Todo.js → src/components/TodoItem.js

 import React from "react";
 import { CgCloseO } from "react-icons/cg";
 
-const CompletedTodos = ({
+const TodoItem = ({
   todos,
   completeTodo,
   removeTodo,
@@ -51,4 +51,4 @@ const CompletedTodos = ({
   ));
 };
 
-export default CompletedTodos;
+export default TodoItem;