Chapter 14: Edit Invoice Form Solution

[mjr2595]

Issue

Declaration of initialState is missing type (State) annotation, which causes an error:

No overload matches this call.
...
Overload 2 of 2
...
Types of property 'message' are incompatible.
          Type 'null' is not assignable to type 'string'.ts(2769)

Solution

Import the State type from your actions.ts file. Annotate initialState variable with State type.

Proposed solution snippet:

import { State, updateInvoice } from '@/app/lib/actions';
...
export default function EditInvoiceForm({
  invoice,
  customers,
}: {
  invoice: InvoiceForm;
  customers: CustomerField[];
}) {
  const initialState: State = { message: null, errors: {} };
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
  const [state, formAction] = useActionState(updateInvoiceWithId, initialState);
 
  return <form action={formAction}>...</form>;
}