CodingNic

Transactions

Model the Entry Form State

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.

javascript
const [form, setForm] = useState(() => makeEmptyForm(cursor, categories));

Add one change handler per field through functional state updates.

javascript
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.