How to pass an object to onSubmit in React Hook Form

user_2399331 0
Viewed 4213

When using react-hook-form I need to pass arbitrary data into the onSubmit function. Example code:

function App() {
  const { register, handleSubmit } = useForm();
  const navigation = { foo: 'bar' }; // object to pass
  const onSubmit = (data) => {
    // how to access navigation here?
    console.log(data);
    console.log(navigation); // undefined
  }; 
  return (
    <form onSubmit={handleSubmit(onSubmit)}> // <<== pass navigation here as arg? 
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

How can I pass my object navigation into onSubmit?

react-hook-form react-native reactjs javascript
3 Answers

handleSubmit(onSubmit) means that you're passing onSubmit by reference and it's taking the data by default , call the handleSubmit like this :

<form onSubmit={handleSubmit(data => onSubmit(data, navigation))}>

and the object should be available here :

const onSubmit = (data, obj) => {
  console.log(data, obj);
};
user_73282180

You could do smth like this.

const onSubmit = (obj) => (formData) => { 
  console.log(obj);
};

<form onSubmit={handleSubmit(onSubmit(obj))}> // your obj
user_99182790

Hi I guess that the navigation props is received by the App Component (like a prop) and then you can pass it to the onSubmit method.

try this:

"onSubmit={()=>handleSubmit(props.navigation)}"

here an explample https://reactnavigation.org/docs/navigation-prop/

user_139452300
Related