Daten der Todo Apps persistiert

react-todolist/src/App.jsx

@@ -1,8 +1,16 @@
-import {useState} from "react";
+import {useState, useEffect} from "react";
+
+const STORAGE_STRING = 'todo-up-todos';
 
 export default function App() {
     const [input, setInput] = useState("");
-    const [todos, setTodos] = useState([]);
+    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem(STORAGE_STRING))||[]);
+
+    useEffect(() => persistTodos(),[todos]);
+
+    function persistTodos() {
+        localStorage.setItem(STORAGE_STRING, JSON.stringify(todos));
+    }
 
     function addTodo() {
         if (input.trim() === "") return;
@@ -30,10 +38,14 @@ export default function App() {
                 </div>
                 <ul id="todo-list-container">
                     {todos.map((todo) => (
-                        <li>
-                            <span onClick={() => toggleTodo(todo.id)}>
-                                {todo.text}: {todo.erledigt ? "bereits " : "noch nicht "} erledigt
-                            </span>
+                        <li key={todo.id}>
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={todo.erledigt}
+                                    onChange={() => toggleTodo(todo.id)}
+                                />{todo.text}
+                            </label>
                             <button onClick={() => deleteTodo(todo.id)}>Entfernen</button>
                         </li>))}
                 </ul>

react-todolist/vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+    server: {
+        port: 3006
+    }
 })