Retain form inputs using useActionState
Unanswered
Silver Fox posted this in #help-forum
Silver FoxOP
Hello all,
I'm currently building out some rather large forms for a project I'm working on.
Using zod to validate the input server-side, I want to be able to return the error(s) to the client to display in the form. Currently, this is done by returning the errors from the server action in an object with the following structure
Whenever the user submits a form, it resets. As I understand this is the intended behaviour when using
1. Use
or
2. Return the request state from within
Which of the two approaches is more idiomatic/recommended in Next? Especially the second approach seems to be quite clunky and induces some networking overhead (although probably minimal). Additionally I'd be unsure how to handle returning the data from file-inputs.
I'd appreciate some guidance/opinion from a more seasoned Next developer.
I'm currently building out some rather large forms for a project I'm working on.
Using zod to validate the input server-side, I want to be able to return the error(s) to the client to display in the form. Currently, this is done by returning the errors from the server action in an object with the following structure
{fieldErrors?: ZodError, ...}. So far so good. Whenever the user submits a form, it resets. As I understand this is the intended behaviour when using
<form action={someAction}>. I have two possible options to overcome this issue:1. Use
onSubmit instead of action, i.e. <form onSubmit={someAction}>or
2. Return the request state from within
someAction. I.e. take the form data, parse it into an object and then return this in the error state object. Then using defaultValue={state.data?.xyz} I can set the default value for the (uncontrolled) input elements. Which of the two approaches is more idiomatic/recommended in Next? Especially the second approach seems to be quite clunky and induces some networking overhead (although probably minimal). Additionally I'd be unsure how to handle returning the data from file-inputs.
I'd appreciate some guidance/opinion from a more seasoned Next developer.
7 Replies
Watch this video, Lee Rob explains it so clearly and I think it covers exactly what you need:
https://youtu.be/KhO4VjaYSXU?si=vCWpZoresKluY8Ft
https://youtu.be/KhO4VjaYSXU?si=vCWpZoresKluY8Ft
Handles error states with the return value from the Server Action via useActionState, and later on he adds the ability to also return the previous input values and populates the form again by using the defaultValue prop on each individual input after the form resetted.
@LuisLl Watch this video, Lee Rob explains it so clearly and I think it covers exactly what you need:
https://youtu.be/KhO4VjaYSXU?si=vCWpZoresKluY8Ft
Silver FoxOP
Funny you send this, I actually came here right after watching it in order to differentiate between both variants :D
I understand how the setup works that was shown in the video. But that requires me sending the entire form-data back to the client. If I were to use
Both versions work and it's more a question of 'design' / recommendation.
I understand how the setup works that was shown in the video. But that requires me sending the entire form-data back to the client. If I were to use
onSubmit instead, I could completely remove the requirement for sending the data back, since the form doesn't get reset automatically after sending the data. Both versions work and it's more a question of 'design' / recommendation.
@Silver Fox Funny you send this, I actually came here right after watching it in order to differentiate between both variants :D
I understand how the setup works that was shown in the video. But that requires me sending the entire form-data back to the client. If I were to use `onSubmit` instead, I could completely remove the requirement for sending the data back, since the form doesn't get reset automatically after sending the data.
Both versions work and it's more a question of 'design' / recommendation.
Then in that case I’d also like to hear the recommendations/ best approach from a more seasoned Next dev 🤣
Great Spotted Woodpecker
I had the same issue
For me I decided to use useTransition and added e.preventDefault() on onSubmit
Here is my example: https://github.com/larissathasdefar/nextjs-library/blob/main/app/admin/book-types/create/page.tsx
PS: I didn't watch the video yet, gonna watch it later to check if I can do differently
For me I decided to use useTransition and added e.preventDefault() on onSubmit
Here is my example: https://github.com/larissathasdefar/nextjs-library/blob/main/app/admin/book-types/create/page.tsx
PS: I didn't watch the video yet, gonna watch it later to check if I can do differently
Yes I've also done what @Great Spotted Woodpecker shows.
Basically an action is an async function that runs inside a transition, plus it prevents the default behavior of forms automatically, handles *formData *directly, and more.
Basically an action is an async function that runs inside a transition, plus it prevents the default behavior of forms automatically, handles *formData *directly, and more.
@Silver Fox solved?