How can I pass some parameters to a server action when using useFormState?

Question

// TSX File
  const [show, setShow] = useState(false)

const [state, formAction] = useFormState(contactFormSubmit, initialState);// Action file
export async function contactFormSubmit(prevState: any, formData: FormData) {I just cannot figure out for the life of me how to do it, and I've tried many things but just kept encountering errors

Wuchang bream · Answer

Okay I ended up following this https://www.reddit.com/r/nextjs/cypeomments/1bruph9/how_to_ad_additional_parameters_to_the/ reddit post and used the bind etc and got it so that there were no type errors etc

However I then encountered the problem that

error: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again.
      at e (/home/jag/code/eleven-plus-stars/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:104051)
      at stringify (native:1:1)
      at /home/jag/code/eleven-plus-stars/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:1916

So what I am trying to do is display a notification if the server action runs / returns success, here is the notification:

      <Notification show={show} setShow={setShow} />

However I realised that I could do this janky thing of

  const [show, setShow] = useState(true)

      <Notification show={state?.success && show} setShow={setShow} />

I don't like it because once the user clicks the X icon on the notification (which sets setShow to False), then the notification cannot be shown again if the user fills out the form again.

Is there a better way I can do this?

How can I pass some parameters to a server action when using useFormState?

1 Reply