Transactions
15 min read
Model the Entry Form State
Open client/src/components/EntryForm.jsx.
Keep the form as one small object because the fields travel together.
const [form, setForm] = useState(() => makeEmptyForm(cursor, categories));
Add one change handler per field through functional state updates.
onChange={(event) =>
setForm((current) => ({
...current,
description: event.target.value,
}))
}
Test it
Type into each field and switch between expense and income. Verify the displayed controls match the selected type.
Checkpoint
Every form control has a single source of truth in React state.