/Knowledge/sources/honojs__hono/examples/stytch-auth-src-todos-tsx--part-02--c467a38cecdd.md
Example: stytch-auth/src/Todos.tsx (part 02) - hono-docs
Example: stytch auth/src/Todos.tsx (part 02) Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://raw.githubusercontent.com/honojs...
Example: stytch-auth/src/Todos.tsx (part 02)
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://raw.githubusercontent.com/honojs/examples/main/stytch-auth/src/Todos.tsx
Summary
const TodoEditor = withLoginRequired(() => { const [todos, setTodos] = useState ([]); const [newTodoText, setNewTodoText] = useState(''); // Fetch todos on component mount useEffect(() => { getTodos().then(todos => setTodos(todos)); }, [...
Content
const TodoEditor = withLoginRequired(() => { const [todos, setTodos] = useState<Todo[]>([]); const [newTodoText, setNewTodoText] = useState('');
// Fetch todos on component mount useEffect(() => { getTodos().then(todos => setTodos(todos)); }, []);
const onAddTodo = (evt: FormEvent) => { evt.preventDefault(); createTodo(newTodoText).then(todos => setTodos(todos)); setNewTodoText(''); };
const onCompleteTodo = (id: string) => { markComplete(id).then(todos => setTodos(todos)); };
const onDeleteTodo = (id: string) => { deleteTodo(id).then(todos => setTodos(todos)); };
Metadata
{
"chunk_index": 1,
"citation": "https://raw.githubusercontent.com/honojs/examples/main/stytch-auth/src/Todos.tsx",
"coverage_role": "examples",
"qualified_title": "Hono / examples / stytch-auth/src/Todos.tsx (2)",
"repo_path": "stytch-auth/src/Todos.tsx",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 0,
"source_id": "/honojs/hono",
"source_type": "examples",
"target_label": "examples",
"title": "Example: stytch-auth/src/Todos.tsx (part 02)",
"upstream_url": "https://raw.githubusercontent.com/honojs/examples/main/stytch-auth/src/Todos.tsx",
"version": "2026"
}