Event handler on a client component is causing an error; maybe related to async functions
Answered
Satin Angora posted this in #help-forum
Satin AngoraOP
I have a
The error I get isn't clear about the origin or the reason of it
form
element,<form
...
onSubmit={handleSubmit}
method="post"
>...
where handleSubmit
is an potentially async
method with definition:async function handleSubmit(event: FormEvent<HTMLFormElement>) {
"use server" // I am not sure about converting this to a server action
event.preventDefault()
const formData = new FormData(event.currentTarget/*.target*/)
if (isSubmitAsync) await onSubmit(formData)
else onSubmit(formData)
...
}
The onSubmit
is a prop of parent component with the signatureonSubmit: (formData: FormData) => Promise<void> | void
There is some use cases where onSubmit
isn't async
, and to prevent any unexpected behaviour arising from await
ing a non-Promise
value, I came up with this.The error I get isn't clear about the origin or the reason of it
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1902:12) @ resolveModelToJSON
- error Error: Event handlers cannot be passed to Client Component props.
<... name=... submitButtonLabel=... onSubmit={function} afterSubmitChildren=... children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at stringify (<anonymous>)
null
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1902:12) @ resolveModelToJSON
- error Error: Event handlers cannot be passed to Client Component props.
<... name=... submitButtonLabel=... onSubmit={function} afterSubmitChildren=... children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at stringify (<anonymous>)
digest: "3042938249"
null
Also I'm not sure if the last two lines are part of the same errors. (cont. below)Answered by Satin Angora
I think the issue was either, I was using server actions inside a client component, or, passed down event handler's type was potentially a
Promise
(it's return type was Promise<void> | void
). Now it works.5 Replies
Satin AngoraOP
(Continuation of the issue mentioned above^)
I'm getting the error two times, and, for this route, I have three components using this component. This makes me think
async
event handlers are the issue. Here is related components with arguments passed down:async function submitContactRequest(formData: FormData) {
...get data from formData and create instance of related model...
openSubmitProcessDialog()
await createRequest(
unrecordedContactReq,
kContactRequestConverter
)
closeSubmitProcessDialog()
}
return <RequestForm
...
onSubmit={submitContactRequest}
All three components pass down a similiar event handler to the RequestForm
component.What may be the issue?
Satin AngoraOP
I think the issue was either, I was using server actions inside a client component, or, passed down event handler's type was potentially a
Promise
(it's return type was Promise<void> | void
). Now it works.Answer