fixed bugs

src/App.tsx

@@ -1,24 +1,26 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Header } from './components/Header';
 import { TodoList } from './components/TodoList';
 import { Footer } from './components/Footer';
-import { TodosContext, TodosProvider } from './services/TodosContext&Provider';
+import { TodosContext } from './services/TodosContext&Provider';
 
 export const App: React.FC = () => {
   const { todos } = useContext(TodosContext);
 
+  useEffect(() => {
+    console.log(todos);
+  }, [todos]);
+
   return (
-    <TodosProvider>
-      <div className="todoapp">
-        <h1 className="todoapp__title">todos</h1>
-        <Header />
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+      <Header />
 
-        <div className="todoapp__content">
-          <TodoList />
+      <div className="todoapp__content">
+        <TodoList />
 
-          {!!todos.length && <Footer />}
-        </div>
+        {!!todos.length && <Footer />}
       </div>
-    </TodosProvider>
+    </div>
   );
 };

src/components/TodoList/TodoItem/TodoItem.tsx

@@ -69,11 +69,10 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
           type="checkbox"
           className="todo__status"
           checked={todo.completed}
-          onClick={() => toggleTodo(todo.id)}
+          onChange={() => toggleTodo(todo.id)}
         />
       </label>
 
-      {/* This form is shown instead of the title and remove button upon editing todo*/}
       {selectedTodo === todo ? (
         <form
           onSubmit={ev => {

src/index.tsx

@@ -3,7 +3,12 @@ import { createRoot } from 'react-dom/client';
 import './styles/index.scss';
 
 import { App } from './App';
+import { TodosProvider } from './services/TodosContext&Provider';
 
 const container = document.getElementById('root') as HTMLDivElement;
 
-createRoot(container).render(<App />);
+createRoot(container).render(
+  <TodosProvider>
+    <App />
+  </TodosProvider>,
+);

src/services/TodoHooks.ts

@@ -52,6 +52,7 @@ export const useTodo = () => {
 
   return {
     todos,
+    setTodos,
     addTodo,
     removeTodo,
     clearCompleted,

src/services/TodosContext&Provider.tsx

@@ -9,10 +9,10 @@ type TodosContextType = {
   setSelectedFilter: (filter: TodoFilter) => void;
 };
 
-const storedTodos = localStorage.getItem('todos');
+export const storedTodos = localStorage.getItem('todos');
 
 export const TodosContext = React.createContext<TodosContextType>({
-  todos: JSON.parse(storedTodos),
+  todos: storedTodos ? JSON.parse(storedTodos) : [],
   setTodos: () => {},
   selectedFilter: TodoFilter.All,
   setSelectedFilter: () => {},