Public
Back
Version 37
2/21/2024
/** @jsxImportSource https://esm.sh/react */
import { useState } from "https://esm.sh/react@18.2.0";
export function TodoApp({ initialTodos }) {
const [todos, setTodos] = useState(initialTodos);
const [todo, setTodo] = useState("");
async function onClick() {
let newTodo = todo;
setTodo("");
setTodos([...todos, { text: newTodo }]);
const newTodos = await fetch("https://stevekrouse-todo_list.web.val.run/todos", {
method: "POST",
body: JSON.stringify(newTodo),
}).then(r => r.json());
setTodos(newTodos);
}
return (
<html>
<head>
<title>Todo List</title>
<script type="module" src="https://esm.town/v/stevekrouse/todoListScript" />
</head>
<body>
<div id="app">
<div>
<h2>Todo list</h2>
<ul style={{ listStyleType: "none", paddingLeft: 0 }}>
{todos.map((todo, index) => <li key={index}>{todo.text}</li>)}
</ul>
<input onChange={e => setTodo(e.target.value)} value={todo} />
<button onClick={onClick}>Add</button>
</div>
</div>
</body>
stevekrouse-todoapp.web.val.run
Updated: February 29, 2024