shadcn and server actions example?

[viral venture]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[limber shell]

you should use action props and onSubmit props together. action props provide the fallback support when javascript is disabled.

function onSubmit(e: FormEvent<HTMLFormElement>) {
  form.handleSubmit(async () => {
    await formAction(new FormData(e.currentTarget))
    form.reset()
  })()
}

<form
action={formAction}
onSubmit={onSubmit}
/>

[limber shell]

the code wasn't working. i have updated the code

[limber shell]

no you don't need to do this

function onSubmit(e: FormEvent<HTMLFormElement>) {
  e.preventDefault()
  form.handleSubmit(async () => {
    if (false) {
      await formAction(new FormData(e.currentTarget))
      form.reset()
    }
  })()
}

try adding preventDefault here

if javascript is availble, it should use onSubmit props, otherwise it will use action props

how about this?

function onSubmit(e: FormEvent<HTMLFormElement>) {
  const formData = new FormData(e.currentTarget)
  e.preventDefault()
  form.handleSubmit(async () => {
    if (false) {
      await formAction(formData)
      form.reset()
    }
  })()
}

oh I know why

function onSubmit(e: FormEvent<HTMLFormElement>) {
  const formData = new FormData(e.currentTarget)
  form.handleSubmit(async () => {
    await formAction(formData)
    form.reset()
  })(e)
}

pass e to it

what value?

you don't need to check if the form isValid or not inside handleSubmit

handleSubmit should handle it for you

also you don't need to check it in action props too

it doesn't work if javascript is not availble

np

[viral venture]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1224486324703199233 message)

[limber shell]

useFormStatus doesn't work well with react-hook-form

because react-hook-form is calling preventDefault() which make useFormStatus doesn't work properly

action={formAction}
onSubmit={e => {
  form.trigger()
  if (form.formState.isValid) {
    e.currentTarget.requestSubmit()
  } else {
    e.preventDefault()
  }
}}

but there is a way to use it. try this if you want to use useFormStatus

you should do it on onSubmit props

yes

[limber shell]

this should work with and without javascript

Why do you need to use useFormStatus while you can get ‘isSubmitting’ from react-hook-form ?