update

app/ui/invoices/create-form.tsx

@@ -1,25 +1,23 @@
-'use client';
+"use client";
 
-import { useFormState } from 'react-dom';
-import { CustomerField } from '@/app/lib/definitions';
-import Link from 'next/link';
 import {
   CheckIcon,
   ClockIcon,
   CurrencyDollarIcon,
   UserCircleIcon,
-} from '@heroicons/react/24/outline';
-import { Button } from '../button';
-import { createInvoice, State } from '@/app/lib/actions';
-import { useActionState } from 'react';
-
+} from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { useFormState } from "react-dom";
+import { createInvoice } from "@/app/lib/actions";
+import type { CustomerField } from "@/app/lib/definitions";
+import { Button } from "../button";
 
 export default function Form({ customers }: { customers: CustomerField[] }) {
-  const initialState = { message: '', error: {} };
-const [state, dispatch] = useFormState(createInvoice, initialState);
-  
+  const initialState = { message: "", error: {} };
+  const [state, dispatch] = useFormState(createInvoice, initialState);
+
   return (
-      <form action={dispatch}>
+    <form action={dispatch}>
       <div className="rounded-md bg-gray-50 p-4 md:p-6">
         {/* Customer Name */}
         <div className="mb-4">
@@ -46,11 +44,10 @@ const [state, dispatch] = useFormState(createInvoice, initialState);
             <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
           </div>
           <div id="customer-error" aria-live="polite" aria-atomic="true">
-            {state.errors?.customerId &&
-              state.errors.customerId.map((error: string) => (
-                <p className="mt-2 text-sm text-red-500" key={error}>
+            {state.errors?.customerId?.map((error: string) => (
+              <p className="mt-2 text-sm text-red-500" key={error}>
                 {error}
-                </p>
+              </p>
             ))}
           </div>
         </div>