TodoDetail() — react Function Reference

Architecture documentation for the TodoDetail() function in TodoDetail.tsx from the react codebase.

Function tsx BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ TodoDetail() — react Function Reference

Dependency Diagram

graph TD
  8b83c596_f110_c079_04b5_f9e243da4359["TodoDetail()"]
  9d193cb4_26df_d78d_77c8_1c784c234257["TodoDetail.tsx"]
  8b83c596_f110_c079_04b5_f9e243da4359 -->|defined in| 9d193cb4_26df_d78d_77c8_1c784c234257
  34b8c762_7987_3584_58bb_9252fbc08ae7["getTodo()"]
  8b83c596_f110_c079_04b5_f9e243da4359 -->|calls| 34b8c762_7987_3584_58bb_9252fbc08ae7
  style 8b83c596_f110_c079_04b5_f9e243da4359 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight-parcel/src/TodoDetail.tsx lines 3–25

export async function TodoDetail({id}: {id: number}) {
  let todo = await getTodo(id);
  if (!todo) {
    return <p>Todo not found</p>;
  }

  return (
    <form className="todo" action={updateTodo.bind(null, todo.id)}>
      <label>
        Title: <input name="title" defaultValue={todo.title} />
      </label>
      <label>
        Description:{' '}
        <textarea name="description" defaultValue={todo.description} />
      </label>
      <label>
        Due date:{' '}
        <input type="date" name="dueDate" defaultValue={todo.dueDate} />
      </label>
      <button type="submit">Update todo</button>
    </form>
  );
}