Use Remix Actions to Handle Form Submission POST Requests
Let’s make forms for those nested admin routes. We can accomplish this using Remix’s handy Form component. But, we also need to actually handle the form submission. We’ll do that using a Remix action.
In Remix you perform all your GETs with loaders, but everything else is going to use an action. Our action in this case will take a request, parse the form data, use Prisma to create a new post with the form data, and then redirect the user to the admin index.
Remember to also write a new function in a .server file that handles creating the post in Prisma!
Note: Fetch implementation has changed, to log request payload, you need to use Object.fromEntries(). e.g. console.log(Object.fromEntries(await request.formData()))
I don't see posts/admin/new.tsx in the repo. Only notes/new.tsx
Hi, I just wanted to share a small feedback while trying to run the code locally.
Interestingly, on my computer, 'console.log(await request.formData())' prints 'FormData {}' without any details in the console.
Except that, the code works perfectly; it just does not display the form payload.
Thank you again for this great lesson
Thanks! I recorded this a few days before we made a change to our fetch implementation. Do this instead:
console.log(Object.fromEntries(await request.formData()))