Reset form after submit

Is there any way to reset form after submitted?

I tried following way but no luck 😦

export default function AccountsIndexPage() {
  const data = useLoaderData<LoaderData>();
  let transition =  useTransition();
  let isAdding = transition.state === "submitting";
  let formRef = useRef<HTMLFormElement>(null);
  useEffect(() => {
    if(!isAdding)  {
      formRef.current?.reset();
    }
  }, [isAdding]);
  return (
    <Panel>
      
      <DataTable>
      
        <Form schema={schema} ref={formRef} className="valid-form flex flex-wrap flex-row -mx-4 mb-6" id="account-form">
          {({ Field, Errors, Button, register }) => (

          ....

In my console I get following errors:

react-dom.development.js:86 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `AccountsIndexPage`.
    at Form3
    at div
    at div
    at div
    at div
    at div
    at div
    at DataTable (http://localhost:5000/build/_shared/chunk-6HY25IE3.js:878:22)
    at div
    at Panel (http://localhost:5000/build/_shared/chunk-6HY25IE3.js:847:18)
    at AccountsIndexPage (http://localhost:5000/build/routes/dashboard/organization/accounts/index-2NPI7QXN.js:56:16)
    at RemixRoute (http://localhost:5000/build/_shared/chunk-3WT6HRTL.js:2552:3)
    at Outlet (http://localhost:5000/build/_shared/chunk-3WT6HRTL.js:675:26)

Is there any option to automatically reset form after submitted ?

[danielweinmann]

@gustavoguichard, I just created #69 based on @zolzaya’s suggestion. @zolzaya, is that what you had in mind?

[zolzaya]

Thank for reply 😃 I make it work with below code. I replaced loading with submitting.

<Form 
  schema={schema}
  onTransition={
    ({transition, reset})  => {
      if(
        transition.state === 'submitting' &&
        transition.type === 'actionSubmission'
      ) {
        reset();
      }
    }
  }>