| 1 | import {getTodo, updateTodo} from './actions'; |
| 2 | |
| 3 | export async function TodoDetail({id}: {id: number}) { |
| 4 | let todo = await getTodo(id); |
| 5 | if (!todo) { |
| 6 | return <p>Todo not found</p>; |
| 7 | } |
| 8 | |
| 9 | return ( |
| 10 | <form className="todo" action={updateTodo.bind(null, todo.id)}> |
| 11 | <label> |
| 12 | Title: <input name="title" defaultValue={todo.title} /> |
| 13 | </label> |
| 14 | <label> |
| 15 | Description:{' '} |
| 16 | <textarea name="description" defaultValue={todo.description} /> |
| 17 | </label> |
| 18 | <label> |
| 19 | Due date:{' '} |
| 20 | <input type="date" name="dueDate" defaultValue={todo.dueDate} /> |
| 21 | </label> |
| 22 | <button type="submit">Update todo</button> |
| 23 | </form> |
| 24 | ); |
| 25 | } |