Search code examples
javascriptreactjsremix.run

Remix Run + React Framework: Form submission is blank

Have been trying to test out the Remix JS framework's form submission and cannot seem to get it to work. I must be missing something obvious, but have been staring at it for hours and haven't been able to find it:

Below is a screenshot of what I'm seeing... I've got a very simple form that has one input text field called "name". When I submit it, I can see that the Form Data includes name: test, but then on my server logs, I see FormData {} when I do console.log(body).

Does anyone know why there is this inconsistency?

What I'm seeing

Solution

  • request.formData() returns a FormData object

    You need to use getters such as get() or getAll().

    export async function action({ request }: ActionArgs) {
    const form = await request.formData()
    const name = form.get('name')
    console.log(name)

    return json({ status: 'success' })
}

    If you see the Remix docs on action, you can see they use body.get('title') to get the title field from the form.