CodingNic

Transactions

Add Transaction Editing

Transactions 20 min read

Add Transaction Editing

Editing is a natural extension of the same form. Pass the selected transaction into EntryForm, populate the form from it, and send a PUT request instead of creating a new record.

Add this API function:

javascript
export const updateTransaction = (id, entry) =>
  request(`/transactions/${id}`, {
    method: "PUT",
    body: JSON.stringify(entry),
  });

Use a dedicated editing state in LedgerPage and make the form visibly different while an edit is active.

Test it

Click the pencil icon, change the description or amount, save, and verify the same transaction row updates instead of creating a duplicate.

Checkpoint

The user can update an existing transaction without leaving the Ledger page.