Index: pages/todo/TodoList.tsx
===================================================================
--- pages/todo/TodoList.tsx	(revision 8ee45534cd667e6cced2ed96968c95d8de3b1029)
+++ pages/todo/TodoList.tsx	(revision 8ee45534cd667e6cced2ed96968c95d8de3b1029)
@@ -0,0 +1,36 @@
+import type { Data } from "./+data";
+import { onNewTodo } from "./TodoList.telefunc";
+import { useState } from "react";
+import { useData } from "vike-react/useData";
+
+export function TodoList() {
+  const { todoItemsInitial } = useData<Data>();
+  const [todoItems, setTodoItems] = useState<{ text: string }[]>(todoItemsInitial);
+  const [newTodo, setNewTodo] = useState("");
+  return (
+    <>
+      <ul>
+        {todoItems.map((todoItem, index) => (
+          // biome-ignore lint: example
+          <li key={index}>{todoItem.text}</li>
+        ))}
+      </ul>
+      <div>
+        <form
+          onSubmit={async (ev) => {
+            ev.preventDefault();
+
+            const text = newTodo;
+            setTodoItems((prev) => [...prev, { text }]);
+            setNewTodo("");
+
+            await onNewTodo({ text });
+          }}
+        >
+          <input type="text" onChange={(ev) => setNewTodo(ev.target.value)} value={newTodo} />
+          <button type="submit">Add to-do</button>
+        </form>
+      </div>
+    </>
+  );
+}