Make handleSubmit return data as first parameter

[charlestbell]

Hi Bill,

Love your work on this package.

I'm writing because of a frustrating situation I keep running into. I use useFieldArray often, and as you'd expect, I'm working with dynamic forms and data. So because of that, I often have to pass in the thing I clicked on into the submit handler. Something like this:

{items.forEach(item => {
return (
... main component omitted....
   <SaveBackButton
              onPress={handleSubmit(onSubmit.bind(this, item }))}
              isLoading={isLoadingGearItems}
              isShared={isShared}
              isReadOnly={!isDirty}
            />

then in the onSubmit, I can get the item out, and then the onSubmit knows what was clicked on

const onSubmit = (item, data) => {
// Now I have the item pressed inside my onSubmit
}

This works ok, but problems start to arise if I need to pass multiple items in, especially with variable amounts of arguments. Because handleSubmit always puts the form data as the last parameter, so what was once the data argument, isn't anymore, and everything breaks.

I tried using object instead

    onPress={handleSubmit(onSubmit.bind(this, {myData1, myData2, etc} }))}

But this isn't a full solution, because if I send in no arguments like this:

    onPress={handleSubmit(onSubmit)}

Then it all breaks again because the position of the data parameter sent to onSubmit changes.

My suggestion:

• Change handleSubmit to return the data as the first parameter, not the last. This will make passing in a variable number of arguments much, much easier.

const onSubmit = (data, ...rest) => {
// Data always stays in the same place, no matter how many arguments are sent in!
}

2nd Approach
A Second approach would be to have handleSubmit take an object, instead of regular arguments. Something like

onPress={handleSubmit({onSubmit: myOnSubmit, onError: myOnError, myData1, myData2, etc })}

Then inside of handleSumbit, it would pass all of the extra arguments (myData1, myData2, etc) on to the onSubmit

const onSubmit({ data, myData1, myData2, etc })

And in this way, we also get to pass in a variable number of arguments with no worries.

And note, most of the time the handleSubmit call would still be very clean, so long as their onSubmit, and onError are named the same as the key.

handleSumbit({onSubmit, onError})

The only thing added is some brackets {}

What do you think?