Flight Booker

Build a small flight booker — the classic 7GUIs exercise. A dropdown chooses a one-way or return trip, and there are two date fields: departure and return. The two fields are linked: the return date is disabled for a one-way trip, and for a return trip you can't book a flight that comes back before it leaves. It's a compact lesson in dependent fields and cross-field validation — where one control's state changes what another can do.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A trip-type select, two date inputs, and a Book button that's enabled only when the selection is valid.

Examples

type = one-way            → return date disabled; Book enabled
type = return, dep ≤ ret  → both dates active; Book enabled
type = return, dep > ret  → return field flagged; Book DISABLED
click Book                → "Booked a return flight departing … returning …"

yyyy-mm-dd strings compare correctly with <, so:
  '2026-07-01' < '2026-07-08'   →  valid return trip

Notes

• The return field depends on the trip type. Disable it unless the trip is a return — its value is irrelevant for a one-way flight.
• Cross-field validation. For a return trip, the Book button must be disabled when the return date is before departure. Because ISO date strings (yyyy-mm-dd) sort lexically, a plain ret < depart comparison works — no Date parsing needed.
• Derive enabled/invalid state. Don't store "is valid" in its own state; compute it from the fields during render.
• Out of scope. Real availability, prices, timezones, multi-city trips — just the two-field linkage and validation.