Lesson 10 Guide — The Nested Child Form with Derived Fields¶

Goal: by the end of this lesson you have the Order Item create/edit form — a child record created under an order, with a Menu Item FK dropdown, a derived Price that fills in when you pick an item, a derived Amount that recomputes as Quantity changes, a Notes field, and a parent Order.Total that updates after every change. This is a dedicated lesson because the derived-field mechanic — one field reacting to another — is new.

The guide is a worked example — the lab builds something different. OrderItem is the child-collection CRUD pattern, and its PRS analog (RequestLine) is built directly during the capstone. It's a named exception with no second TableServe entity to repeat it on, so you build it once here alongside the instructor. This lesson's lab then builds the Categories create/edit form, reusing patterns you already know.

The general pattern you're learning: a nested child form is scoped to a parent (reached from the parent's detail page, Cancel returns there). It has derived display fields — values computed from other fields with react-hook-form's watch, shown as read-only text, not inputs. Saving the child triggers the API to recalculate the parent's total (the side-effect recalculation you built in the API pass). You'll also build the items table on the order detail page — where these child rows are listed, edited, and deleted (with a delete-confirmation modal, the state-driven Modal pattern from Lesson 9 applied to a destructive action).

How to use this guide. Sections headed ▶ Code along are ones you build into your project (each ends with a quick Save and check); unmarked sections are concept. Each code block carries its file name as a title bar.

Prerequisite: your API is running on the HTTP profile (http, not https), and you have the Order Detail page from Lessons 8–9 (this lesson adds the items table to it).

1. ▶ Code along — The OrderItem type, API module, and a form scoped to its parent¶

First the child's type and its API module. Like the other modules so far, these use plain fetch — Lesson 12 hardens every module with the shared checkStatus/parseJSON helpers:

src/orderItems/IOrderItem.ts

import { IMenuItem } from "../menuItems/IMenuItem";
import { IOrder } from "../orders/IOrder";

export interface IOrderItem {
  id: number | undefined;
  quantity: number;
  notes: string | undefined;
  orderId: number | undefined;
  menuItemId: number | undefined;
  menuItem: IMenuItem | undefined;
  order: IOrder | undefined;
}

src/orderItems/OrderItemAPI.ts

import { IOrderItem } from "./IOrderItem";

const url = "http://localhost:5556/api/orderitems";

export const orderItemAPI = {
  find(id: number): Promise<IOrderItem> {
    return fetch(`${url}/${id}`).then((r) => r.json());
  },
  post(orderItem: IOrderItem): Promise<IOrderItem> {
    return fetch(url, {
      method: "POST",
      body: JSON.stringify(orderItem),
      headers: { "Content-Type": "application/json" },
    }).then((r) => r.json());
  },
  put(orderItem: IOrderItem) {
    return fetch(`${url}/${orderItem.id}`, {
      method: "PUT",
      body: JSON.stringify(orderItem),
      headers: { "Content-Type": "application/json" },
    });
  },
  delete(id: number) {
    return fetch(`${url}/${id}`, { method: "DELETE" });
  },
};

The next several snippets are pieces of a new file, src/orderItems/OrderItemForm.tsx — each is shown as a diff with the enclosing function OrderItemForm() (and ... for the code you're not touching) so you can see exactly where it nests. Section 5 lists the finished file whole if you'd rather read it than assemble it.

The Order Item form is reached from an order's detail page and always belongs to that order. Two route params carry the context — the parent order id and (on edit) the item's itemId. The routes themselves you add to the router in section 7; they're shown here for the two params they carry:

src/main.tsx

{ path: "orders/detail/:id/orderitem/create", element: <OrderItemCreatePage /> },
{ path: "orders/detail/:id/orderitem/edit/:itemId", element: <OrderItemEditPage /> },

Read both params at the top of the component with useParams: