Remix Single: Clearing Inputs After Form Submissions

[@seanmcdonald8998]

Loving these singles. Reinforcing some stuff I already knew plus teaching plenty I didn't know about 👍

[@carloslouredaparrado8915]

Oh man. You are killing it with this little pills!! Great job. Thanks for the hard work Ryan & Co.

[@vedovelli]

Remix brought up my lazy side, and now I just want to use the good old and let the browser do everything for me! 🙈

[@benny-shen]

For latest version of Remix, you should code like this to stop TypeScript from complaining: let foo = useRef(null); let bar = useRef(null);

[@Jan-fq2yp]

thanks

[@nicolasrenon]

Thanks! Indeed, I was getting the error: Type 'MutableRefObject' is not assignable to type 'Ref | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'HTMLFormElement | undefined' is not assignable to type 'HTMLFormElement | null'. Type 'undefined' is not assignable to type 'HTMLFormElement | null'.ts(2322)

[@Svish_]

Would `isAdding` turn `false` and clear out the form on cancellation as well? And if the request failed? Thinking that `useEffect` "flag" could become quite complicated quite quickly... 🤔

[@noriller]

since we're using all the old, formal and proper things... instead of creating refs, any reason not to use document selector?

[@acceledgy]

You're awesome at explaining how to use Remix! Is there an updated version of this playlist for v2? Or is the method still the same for useEffect in v2?

[@chriskruining]

looking forward to the optimistic UI, because I believe that would also "fix" the "issue" where on submission the form is reset and then the new entry get added, correct?

[@DEV_XO]

Amazing, thanks! ❤Remix.

[@Jacobswain477]

Please do videos on best practices for resource routes + include examples of updating records and not just creating records.

[@RichellyItalo]

Important: this will be removed for useNavigation in v2.

[@abdelhameedhamdy]

Like the short time demos

[@shivamjhaa]

"Don't need state just to clear forms out"... and hit like

[@mogadanez]

If you have server side validation - you cant do it by isAdding flag.

[@binarymystic]

It's 2024 and this is the best way I've found to do this today: function Component() { const submit = useSubmit(); return ( { submit(event.currentTarget); event.currentTarget.reset(); event.preventDefault(); }} > {/* ... */} ); }

[@brianwalsh7040]

thanks, was wondernig why it wasnt working for me

[@kamertonaudiophileplayer847]

Wait, are you talking about SPA? Because all form fields are cleared automatically at a submission otherwise. As for SPA I do INNERHTML = '' , done, simple?

[@JackRabbit-tg6hc]

OMG how unconvenient. Feels like going back in time...