How to pass arguments in useFormState in server action?

Unanswered

Almond stone wasp posted this in #help-forum

Almond stone waspOP

2023-12-12T10:56:37.000Z

I am trying to pass an argument using useFormState

const EmailForm = () => {
  const initialState = {errors : {}, message : null, data  : undefined};
  const SendEmail = sendEmail.bind(null, selectLink );
  const [state, formAction] = useFormState(SendEmail, initialState);
  
return(
  <form action={SendEmail}>
    ////// 
    //////
  </fomr>
)
}

export type State = {
    errors?: {
        from ?: string[] | undefined;
        to ?: string[] | undefined;
        subject?: string[] | undefined;
        message?: string[] | undefined;
      };
    message?: string | null;
    data : undefined;
}


// action
export async function sendEmail(selectLink : string, prevState : State, formData : FormData){

    const validateFields =  sendEmailFormSchema.safeParse({
        from : formData.get('from'),
        to : formData.get('to'),
        subject : formData.get('subject'),
        message : formData.get('message'),
    })

}

// getting this error

o overload matches this call.
  Overload 1 of 2, '(action: (state: Error | { errors: { to?: string[] | undefined; from?: string[] | undefined; message?: string[] | undefined; subject?: string[] | undefined; }; message: string; data: undefined; } | { ...; } | { ...; }) => Error | ... 3 more ... | Promise<...>, initialState: Error | ... 2 more ... | { ...; }, permalink?: string | undefined): [state: ...]', gave the following error.
    Argument of type '(prevState: State, formData: FormData) => Promise<Error | { errors: { to?: string[] | undefined; from?: string[] | undefined; message?: string[]

3 Replies

Ray

2023-12-12T11:00:12.000Z

like you did

the error is complaining the typeof state

try

const EmailForm = () => {
  const SendEmail = sendEmail.bind(null, selectLink );
  const initialState = {errors : {}, message : null, data  : undefined} as Awaited<ReturnType<typeof SendEmail>>;
  const [state, formAction] = useFormState(SendEmail, initialState);
  
return(
  <form action={SendEmail}>
    ////// 
    //////
  </fomr>
)
}