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>;
}

[pete-kufahl]

I'm still getting the same error on the same line: no overload matches this call but it's referencing updateInvoiceWithId this time.

import { updateInvoice, State } from '@/app/lib/actions';
...
const initialState: State = { message: null, errors: {} };
const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
const [state, formAction] = useActionState(updateInvoiceWithId, initialState);

UPDATE: this error was resolved by putting in another argument into the definition of updateInvoice in actions.ts:

export async function updateInvoice(id: string, prevState: State, formData: FormData) {