Theo's Typesafe Cult•4mo ago

How do I reset form fields through a server action / server component?

I have a form where there is a simple input field and a button. After clicking the submit button, the form submits and data is sent through a server action. How to I reset the form field while maintaining the component as a server component? I have see many solutions online where we would convert it into a client component and userefs/hooks etc to reset the form fields. Is there a way to do this through the server action / server component?

export default async function SubmitPlaylist() {
    async function submitPlaylist(formData: FormData) {
        'use server';

        await api.playlist.submitPlaylist();

        redirect("/playlist");
    }

    return (
         <form
              id="submit-playlist-form"
              action={submitPlaylist}
          >
              <div className="grid w-full items-center gap-4">
                  <div className="flex flex-col space-y-1.5">
                      <Label htmlFor="playlistUrl">Playlist</Label>
                      <Input id="playlistUrl" name="playlistUrl" placeholder="Spotify playlist link" />
                  </div>
              </div>
          </form>
    )
}

export default async function SubmitPlaylist() {
    async function submitPlaylist(formData: FormData) {
        'use server';

        await api.playlist.submitPlaylist();

        redirect("/playlist");
    }

    return (
         <form
              id="submit-playlist-form"
              action={submitPlaylist}
          >
              <div className="grid w-full items-center gap-4">
                  <div className="flex flex-col space-y-1.5">
                      <Label htmlFor="playlistUrl">Playlist</Label>
                      <Input id="playlistUrl" name="playlistUrl" placeholder="Spotify playlist link" />
                  </div>
              </div>
          </form>
    )
}

1 Reply

JulieCezar•4mo ago

Although it's currently in Canary, you can use the new useActionState hook, which allows for easily resetting the fields. If that is not an option you need to create a ref for the form, then inside the action use the ref to reset the fields.

Gaming

Programming

How do I reset form fields through a server action / server component?