Input data to the useSubmit hook

[bogdaaamn]

Hello!! I've been trying to leverage the full power of FormData in Remix and I love it so far.

I was looking for ways to work around inputting more custom data to the useSubmit hook (for example the data got from the loader that I'd like to use in the action as well). I see using useRef or disabled inputs might work well, but I was trying to find less hack-y ways to do it without hacking the html.

Do you know if there are good ways to do it? Or if the Remix APIs support something like that? 🙏🙏

[colinramsay]

The docs say:

Returns the function that may be used to submit a form (or some raw FormData) to the server using the same process that Form uses internally onSubmit.

Doesn't that mean that you could create your own FormData which can be passed? That means you can pass whatever you like to submit. For example:

const fd1 = new FormData()
fd1.append('hello', 'there')

const fd2 = new FormData(someFormEl)

const combinedObj = {
   ...Object.fromEntries(fd1.entries()),
   ...Object.fromEntries(fd1.entries())
}

// The below might not be needed as submit() also takes a { [name: string]: string }
// https://github.com/remix-run/remix/blob/5783dc00fa27c6198c332096d70ae638f2767e4a/packages/remix-react/components.tsx#L1050

// https://stackoverflow.com/a/40552372/125680
const combinedFormData = Object.keys(combinedObj).reduce((formData, key) => {
    formData.append(key, object[key]);
    return formData;
}, new FormData())

submit(combinedFormData)

The above is prototype code but is meant to demonstrate that I can't see any fundamental reason why you can't do what you're suggesting.

[bogdaaamn]

That's a great idea @colinramsay! Didn't even think about using the form element, thanks a lot 🙌🏼