diff --git a/src/App.tsx b/src/App.tsx
index 9dc0a3d35..192eb3d77 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import { Todo } from './types/Todo';
 import * as todoService from './api/todos';
 import { FilterOptions } from './types/FilterOptions';
 import { Todolist } from './components/TodoList';
-import { TodoItem } from './components/TodoItem';
 import classNames from 'classnames';
 
 export const App: React.FC = () => {
@@ -225,18 +224,9 @@ export const App: React.FC = () => {
             filteredTodos={filteredTodos}
             setErrorMessage={setErrorMessage}
             loadingIds={loadingIds}
+            tempTodo={tempTodo}
           />
-          {tempTodo && (
-            <TodoItem
-              todo={tempTodo}
-              onDelete={handleDelete}
-              onUpdate={handleUpdateTodo}
-              deletingId={deletingId}
-              filteredTodos={filteredTodos}
-              setErrorMessage={setErrorMessage}
-              loadingIds={loadingIds}
-            />
-          )}
+
           {todos.length !== 0 && (
             <footer className="todoapp__footer" data-cy="Footer">
               <span className="todo-count" data-cy="TodosCounter">
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index 050b70794..9cb564101 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -13,6 +13,7 @@ type Props = {
   filteredTodos: Todo[];
   setErrorMessage: (message: string) => void;
   loadingIds: number[];
+  tempTodo: Todo | null;
 };
 
 export const Todolist: React.FC<Props> = ({
@@ -23,6 +24,7 @@ export const Todolist: React.FC<Props> = ({
   filteredTodos,
   setErrorMessage,
   loadingIds,
+  tempTodo,
 }) => {
   return (
     <section className="todoapp__main" data-cy="TodoList">
@@ -38,6 +40,18 @@ export const Todolist: React.FC<Props> = ({
           key={todo.id}
         />
       ))}
+      {tempTodo && (
+        <TodoItem
+          todo={tempTodo}
+          onDelete={onDelete}
+          onUpdate={onUpdate}
+          deletingId={deletingId}
+          filteredTodos={filteredTodos}
+          setErrorMessage={setErrorMessage}
+          loadingIds={loadingIds}
+          key={tempTodo.id}
+        />
+      )}
     </section>
   );
 };