React router dom Actions

[@ur.cristinanor]

Thanks for the efforts bro, have you tried out using useFetcher to submit data from a checkbox. I am really failling to come up with this.

[@forinda]

I'll do an upload on this if you need. Still haven't used it but I can do one on top of this

[@ur.cristinanor]

@@forinda for sure

[@forinda]

Uploading a video on useFetcher today

[@ur.cristinanor]

@@forinda You are a gem brother, let me check it out.

[@eliediab3091]

Thanks for this! One question though, if I'm displaying the add post form and the posts in the same page, is there a way to clear the inputs when submitting?

[@forinda]

If you want to reset your form, You'll not now rely on the default form submit. Use the useSubmit hook to do the form submittion I have this simple setup: import React from "react"; import { ActionFunctionArgs, Form, useActionData, useRouteError, useSubmit, } from "react-router-dom"; const Home = () => { const data = useActionData() as { title: string }; const submit = useSubmit(); return ( Home { e.preventDefault(); submit(e.currentTarget.form); e.currentTarget.form!.reset(); }} > Submit ); }; export default Object.assign(Home, { action: async ({ request }: ActionFunctionArgs) => { const formData = await request.formData(); const data = Object.fromEntries(formData.entries()); console.log(data); return null; }, ErrorElement: () => { const error = useRouteError() as any; return ( Error {error.statusText} ); }, }); In the above submit button can get the current target thus you can access the form object and reset after submission. Above still before submission you can carry out validation before submission then after successful entry you can reset your form using this simple code onClick={(e) => { e.preventDefault(); submit(e.currentTarget.form); e.currentTarget.form!.reset(); }} I hope this helps. If you need more clarification you can just ask below☺

[@eliediab3091]

@@forinda yup this works!! thank you so much!

[@eliediab3091]

Brother I have one more question, is it really possible to read and add data to react context in loader and action functions? since we can't use hooks inside of them. Thank you once again.

[@forinda]

@@eliediab3091 It will throw an exception for sure because that will be outside the scope of the jsx component

[@forinda]

Just handle every logic within your components and use the useActiondata hook to retrieve values from your actions