#Proper way to reset an input using server actions

17 messages · Page 1 of 1 (latest)

solid patrol
#

Just as I stated on the title, I have a simple form with one input field. I want to call my server action and upon finishing that action I want to reset the contents of the input field. Wondering what the best way to go about this would be?

lone rampartBOT
#
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)

solid patrol
#

for more context, I did try doing something like

action={async (formData) => {
  formAction(formData);
  ref.current?.reset();
});

where formAction is coming from "useFormState"
but that throws an error saying that formAction expected 0 paramenters but got one. I believe it still saved everything fine but that error kept coming up on the terminal.

So am wondering if that is not the proper way of doing it or why passing it the formData kept throwing that error?

willow heron
solid patrol
#

I went with adding a success on my intial state and returned "ok" when my server action finished without errors and used "useEffect" to check when the state changes and did the ref.current?.reset() when it returns "ok" seems to work fine

#

I think this works fine and doesnt do anything funky or hacky. My server action just returns something like this >

Screenshot_2024-06-04_at_6.39.57_PM.png
#

so basically now I just return ok on success and use the state on my form client componet to reset the form. That sounds better and more proper. what do you think @willow heron

echo sinew
#

It's funny when i tested with form server actions i had the same problem but the other way around.
The form always resetted on errors and i wanted to keep the user values.
I think i used uncontrolled (stateless) inputs.

I ended up doing the same thing as you but instead of returning nothing i had to return the submitted data (onError) again

solid patrol
echo sinew
#

yea both feels a bit wrong but not too wrong to get into it, at least to me 😄
maybe others know a better approach just leave the therad open

solid patrol
#

yeah, dont know if theres a more "official" way of doing so. lets see if anyone else has an opinion on it

willow heron
# solid patrol so basically now I just return ok on success and use the state on my form client...

So, if I understood it properly, You want to reset the form inputs in case the Server Action got executed successfully, but keep the input fields filled (not reset the form) in case something went wrong.

What if You, in case of an Error, made a Server Action throw an error and handled it in a way like this:

<form action={()=>{
    formAction().then(()=>ref.current?.reset()).catch(()=>{console.log('Error')})
}}
ref={ref}>
    {/* Form Content */}
</form>
echo sinew
willow heron
# echo sinew That won't work server actions swallow errors in prod. Don't throw errors within...

Yes, You are right. Thanks!

You wouldn't get an actual Error message, but an Error would still occur so if You don't want to handle an Error based on it's content, it could still work for You.

You could also follow the same approach and make Your Sever Action return response, for example, in the following form: {data: {}, error: {}}. Following that it could check if an Error occurred or not:

  formAction().then((res)=>{res.error == null && ref.current?.reset()})
echo sinew
willow heron
echo sinew