Created
October 11, 2025 13:43
-
-
Save ryanflorence/67f6874ef920937f5536a8f6743ee590 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { type Remix } from "@remix-run/dom" | |
| import { dom } from "@remix-run/events" | |
| import { STATES } from "./lib/states.ts" | |
| export function App(this: Remix.Handle) { | |
| let fetchState: "idle" | "loading" | "loaded" = "idle" | |
| let cities: string[] = [] | |
| return () => ( | |
| <form | |
| css={{ | |
| margin: "24px", | |
| display: "flex", | |
| gap: "16px", | |
| "& label": { | |
| display: "block", | |
| marginBottom: "4px", | |
| }, | |
| }} | |
| > | |
| <div> | |
| <label for="state">State</label> | |
| <select | |
| id="state" | |
| on={dom.change(async (event, signal) => { | |
| fetchState = "loading" | |
| this.update() | |
| let response = await fetch( | |
| `/api/data?state=${event.currentTarget.value}`, | |
| { signal } | |
| ) | |
| cities = await response.json() | |
| fetchState = "loaded" | |
| this.update() | |
| })} | |
| > | |
| <option value="">Select a state...</option> | |
| {STATES.map((state) => ( | |
| <option value={state.id}>{state.name}</option> | |
| ))} | |
| </select> | |
| </div> | |
| <div> | |
| <label for="city">City</label> | |
| <select | |
| id="city" | |
| disabled={fetchState !== "loaded"} | |
| > | |
| {fetchState === "idle" ? ( | |
| <option value="">Select a state...</option> | |
| ) : fetchState === "loading" ? ( | |
| <option value="">Loading...</option> | |
| ) : ( | |
| cities.map((city) => ( | |
| <option value={city}>{city}</option> | |
| )) | |
| )} | |
| </select> | |
| </div> | |
| </form> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment