Solution fix3

src/App.tsx

@@ -1,12 +1,10 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React, { useContext } from 'react';
-import { TodoContext, TodoProvider } from './context/TodoContext';
+import React from 'react';
+import { TodoProvider } from './context/TodoContext';
 import { AddTodo } from './components/AddTodo';
 import { TodoList } from './components/TodoList';
 
 export const App: React.FC = () => {
-  const { todos } = useContext(TodoContext);
-
   return (
     <TodoProvider>
       <div className="todoapp">
@@ -16,7 +14,7 @@ export const App: React.FC = () => {
           <AddTodo />
         </header>
 
-        <TodoList todos={todos} />
+        <TodoList />
       </div>
     </TodoProvider>
   );

src/components/TodoList.tsx

@@ -1,18 +1,14 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { TodoItem } from './TodoItem';
 import { Todo } from '../types/Todo';
+import { TodoContext } from '../context/TodoContext';
 
-type Props = {
-  todos: Todo[];
-};
-
-export const TodoList: React.FC<Props> = ({ todos }) => {
-  // eslint-disable-next-line no-console
-  console.log('Todos in TodoList:', todos);
+export const TodoList: React.FC = () => {
+  const { todos } = useContext(TodoContext);
 
   return (
     <ul className="todo-list" data-cy="todoList">
-      {todos.map((todo) => (
+      {todos.map((todo: Todo) => (
         <TodoItem key={todo.id} todo={todo} />
       ))}
     </ul>

src/context/TodoContext.tsx

@@ -1,13 +1,22 @@
-import React, { useState, ReactNode, useMemo } from 'react';
+import React, {
+  useState, ReactNode, useMemo,
+} from 'react';
 import { Todo } from '../types/Todo';
 
-const getTodos = JSON.parse(localStorage.getItem('todos') || '[]') as Todo[];
+const TODO_STORAGE_KEY = 'todos';
+
+const getTodos = (): Todo[] => {
+  const storedTodos = localStorage.getItem(TODO_STORAGE_KEY);
+
+  return storedTodos
+    ? JSON.parse(storedTodos) : [];
+};
 
 export const TodoContext = React.createContext<{
   todos: Todo[];
   setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
 }>({
-  todos: getTodos,
+  todos: [],
   setTodos: () => {},
 });
 
@@ -16,7 +25,8 @@ interface TodoProviderProps {
 }
 
 export const TodoProvider: React.FC<TodoProviderProps> = ({ children }) => {
-  const [todos, setTodos] = useState(getTodos);
+  const [todos, setTodos] = useState<Todo[]>(getTodos());
+
   const value = useMemo(() => ({
     todos,
     setTodos,