Users Database

Build a small CRUD interface backed entirely by local state: list users, filter them by name, create new ones, edit existing ones, and delete them. There's no server — the users array is the database, and every operation is just an immutable transformation of that array. The one subtlety is that a single form does double duty for both "create" and "edit," distinguished by one extra piece of state.

Signature

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

A form, a filter box, and a list of users with Edit/Delete on each row.

Examples

type a name + occupation, click Add  → new user appended to the list
click Edit on a row → form fills with that user, button becomes "Save"
click Save → that user is updated in place; form clears

type "ad" in the filter → only users whose name contains "ad" (case-insensitive)
click Delete → that user is removed from the list

Notes

• The array is the database. Create = append, update = map-replace, delete = filter-out — all returning new arrays.
• One form, two modes. editingId === null means "create"; otherwise "edit that id." The submit handler branches on it.
• Filter is derived. Don't store a filtered copy — compute users.filter(...) on render.
• Out of scope. Persistence, validation beyond "name required," server sync — it's all in memory.