Feature Request: Reset form inside of Server Component or Action

[FleetAdmiralJakob]

Hi, I want to be able to reset my form easily (after the action succeeded (so with the ability to react to a response of the server)) with JS Disabled and JS Enabled (if this is even possible).

The response of the server reaction thingy should be something like this:

-> On Success: The form should clear itself
-> On Error: The input should keep it's content

[FleetAdmiralJakob]

This feature is urgently needed as able to see in this discussion: vercel/next.js#58448

[Eyuelb]

hi @FleetAdmiralJakob can you explain more and tell the input the output u need more like what u have tried and failed

[FleetAdmiralJakob]

@Eyuelb I tried to use useFormState but this was not resetting the form with JS Enabled.
I tried to use useRef, but then I can't react to different cases (success, error) and also you loose the progressive enhancement.

[Eyuelb]

A quick fix is

export function processDataByType(data: any): any {
  if (typeof data === "string") {
    return "";
  } else if (typeof data === "boolean") {
    return data;
  } else if (Array.isArray(data)) {
    return [];
  } else {
    // You can handle other data types here if needed
    return null; // Default case, return null for other types
  }
}

Object.keys(formState.defaultValues)
.forEach((key:any) =>
 setValue(key,processDataByType(formState.defaultValues[key])
))

This basically resets the form

[FleetAdmiralJakob]

OK, thank you @Eyuelb. But this seems like a lot of code for this very simple task. I can't imagine what other people have to do for their use cases. I will try this one out as fast as I can and give feedback. But I hope that there will be an easier solution in the future.

EDIT: I worry a little bit about alle the anys

[FleetAdmiralJakob]

A quick fix is

`export function processDataByType(data: any): any {
if (typeof data === "string") {
return "";
} else if (typeof data === "boolean") {
return data;
} else if (Array.isArray(data)) {
return [];
} else {
// You can handle other data types here if needed
return null; // Default case, return null for other types
}
}

Object.keys(formState.defaultValues).forEach((key:any) => setValue(key,processDataByType(formState.defaultValues[key])))`

This basically resets the form

Could you pls format the code so it's easier to read.

[Eyuelb]

@FleetAdmiralJakob did you find a solution

[FleetAdmiralJakob]

@Eyuelb Unfortunately not, I think React needs a general solution for this.

[PedroMarianoAlmeida]

A quick fix is
export function processDataByType(data: any): any { if (typeof data === "string") { return ""; } else if (typeof data === "boolean") { return data; } else if (Array.isArray(data)) { return []; } else { // You can handle other data types here if needed return null; // Default case, return null for other types } } Object.keys(formState.defaultValues).forEach((key:any) => setValue(key,processDataByType(formState.defaultValues[key])))
This basically resets the form

Could you pls format the code so it's easier to read.

A quick fix is

export function processDataByType(data: any): any {
  if (typeof data === "string") {
    return "";
  } else if (typeof data === "boolean") {
    return data;
  } else if (Array.isArray(data)) {
    return [];
  } else {
    // You can handle other data types here if needed
    return null; // Default case, return null for other types
  }
}

Object.keys(formState.defaultValues).forEach((key: any) =>
  setValue(key, processDataByType(formState.defaultValues[key]))
);

This basically resets the form

[matt-wigg]

This post offers a solution by use of the key prop - santidalmasso

This is an alternative code snippet:

// actions.js

export async function submitFormAction(state, formData) {
  try {
    // do something
    return {
      ...state,
      error: null,
      resetKey: Date.now().toString(), // Generate a new resetKey to trigger form reset
    };
  } catch (error) {
    console.error("Error during form submission:", error);
    return {
      ...state,
      error: "Submission failed. Please try again.",
    };
  }
}

// FormComponent.js

import { useFormState } from "react-dom";
import { submitFormAction } from "./actions";

export default function SimpleForm() {
  const [response, submitForm] = useFormState(submitFormAction, undefined);

  return (
    <div className="form-container">
      <form action={submitForm} key={response?.resetKey}>
        <input type="text" placeholder="Your Input" name="inputField" />
        <button type="submit">Submit</button>
        {response?.error && <p>{response.error}</p>}
      </form>
    </div>
  );
}