Redux-form: Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

[francorisso]

I'm using this example here, and I get this error:

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

I'm using this with redux-form 3, and I'm using a Modal to display the content, is a dumb component, so is not connected to redux.
Is there anything I'm missing here?

Thanks!

[francorisso]

My bad!,
if someone is having the same issue is because the lack of the onSubmit action in the props of the components.

[sidazhou]

Running into the same problem, can you elaborate on the solution?

[ashwinvandijk]

@sidazhou, the way I fixed it, is to pass a function to the handleSubmit function provided by redux-form:
<form onSubmit={handleSubmit(this.myOwnFunction)}>. handleSubmit has to be provided trough the props: const { handleSubmit } = this.props.

[sidazhou]

I've understood what was the problem:
onSubmit has to be defined on the parent of the form

<Parent>
  <Child onSubmit={myFunc}>
</Parent>

You would expect the child

<Child> 
  <form></form>
</Child>

has this.props.onSubmit to be available to you. However, redux-form changes it to this.props.handleSubmit instead. To reiterate, in the Child, this.props.handleSubmit == myFunc

[dtothefp]

The documentation...or lack there of, on this is super annoying. Just to be clear for others with this problem I did below which works

import React, {Component, PropTypes} from 'react';
import {reduxForm} from 'redux-form';

class ContactForm extends Component {
  static propTypes = {
    handleSubmit: PropTypes.func,
    fields: PropTypes.object
  }

  handleSubmit(e) {
    //do stuff here
  }

  render() {
    const {fields: {firstName, lastName, email}, handleSubmit} = this.props;

    return (
      <form onSubmit={handleSubmit(this.handleSubmit)}>
        <div>
          <label>First Name</label>
          <input type="text" placeholder="First Name" {...firstName}/>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" placeholder="Last Name" {...lastName}/>
        </div>
        <div>
          <label>Email</label>
          <input type="email" placeholder="Email" {...email}/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// Decorate the form component
export default reduxForm({
  form: 'contact', // a unique name for this form
  fields: ['firstName', 'lastName', 'email']
})(ContactForm);

Don't be fooled and do the intuitive thing which would be to define a prop of handleSubmit on your instantiated JSX <ContactForm handleSubmit={myFunc}> 😢

[erikras]

Don't be fooled and do the intuitive thing which would be to define a prop of handleSubmit on your instantiated JSX <ContactForm handleSubmit={myFunc}> 😢

This is why the FAQs mention the difference between onX and handleX.

[4pr3x]

Thanks to the hint from @dtothefp I was able to nearly solve the issue also for the wizard example. On the Third WizardPage I´m catching the submit call. But I still get the Error "Required prop onSubmit was not specified in ...". I guess this is based on the problem that I should have to route the event up the FormWizard Parent Component. I tried several things, but I don´t get it working without the Warning. Could someone point out how to do it or even If the idea of the event-routing up to Parent Component is correct?

[jinxac]

If you are using containers in this case, do check if you are returning Onsubmit function from mapDispatchtoProps.

[EnriqueSalazar]

I'll write it here again because is how I finally understood it and maybe is easier for other beginners as myself.

This is what worked for me:

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {
  Button,

} from 'react-bootstrap';
import InputField from '../InputField';

let Modificador = props => {

  const {
    initialValues,
    mySubmit,
    handleSubmit   <---- important!
  }= props;

  return (
    <form onSubmit={handleSubmit(mySubmit)}>
       <Field
              name="nombre"
              label="Nombre"
              type="text"
              component={InputField}
            />
            <Button
              type="submit"
              bsStyle="primary">
              {"Guardar "}
              <Glyphicon glyph="floppy-save"/>
            </Button>
    </form>
  );
};

Modificador = reduxForm({
  form: 'modificadorForm',
  })(Modificador);

export default Modificador;

The parent

   <Modificador
            initialValues={values}
            mySubmit={submitFunction}
/>

[ashishchauhan1]

@EnriqueSalaza code started working after gone through your example

[kesiena115]

@EnriqueSalazar Thank you so much for calling your submit function mySubmit instead of handleSubmit or onSubmit. This is perhaps one of the main reasons why most other examples I've read were very confusing until I read yours.

In general, I feel like all the examples I've read contain too many occurrences of the word submit. It becomes too easy to mix up submit, handleSubmit, onSubmit, "submit", etc. After seeing submit about 5 times (with slightly different prefixes and suffixes), it becomes too easy to miss some variables/functions and end up confused.

It also doesn't help that many examples seem to be explaining two different ways of doing this, while not clearly showing the two options side by side.

[fchubu]

@dtothefp Thank you so much bro. Really thanks, it was driving my crazy jaja xD

[mandajoan]

This is how I bound my form handler (handleFormSubmit) to the handleSubmit:

const handleSubmit = this.props

 <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

[ronnaf]

I wouldn't have understood where handleSubmit came from if I haven't seen this example: https://codesandbox.io/s/mZRjw05yp

[ShubhamKushwah]

I am getting the same error!
What if I need to pass an action creator to handleSubmit like this:

<form onSubmit={handleSubmit(this.props.ActionCreator)}>
</form>
...
...
export default reduxForm({
  form: 'bar',
  fields: ['foo', 'foo2', 'foo3']
}, null, {ActionCreator})(loremContainer);

Please help!

[fakiolinho]

Hmm i am getting this error in a Remote Submit occasion in v7.4.2. I call it like this:

this.props.dispatch(submit('myFormName'));

and my form is this:

<form onSubmit={handleSubmit(this.handleSubmit)}>
...
</form>

[iketown]

I got this error too, I _thought_ I was passing a function to handleSubmit() but i was passing it some other garbage.
handleSubmit(someOtherGarbage)
I realized my error when i just passed it a function.
handleSubmit( stuff => console.log(stuff) )
...and suddenly there were all my form outputs in the console.
solution: I had a typo in my action creator. duh.

[christopher-francisco]

If this is so different than what the docs explain, why has the docs never been updated?

[moffsugita]

@EnriqueSalazar
Thank you.

<form onSubmit={handleSubmit(mySubmit)}>
it was important for me. handleSubmit(mySubmit) <---- important

[farynaio]

Hmm i am getting this error in a Remote Submit occasion in v7.4.2. I call it like this:

this.props.dispatch(submit('myFormName'));

and my form is this:

<form onSubmit={handleSubmit(this.handleSubmit)}>
...
</form>

I stumble upon the same issue. It looks like bug.

[jasperkuperus]

I had the same issue as @adamfaryna and @fakiolinho and got this error in a remote submit. In my case, I accidentally had two different components that both initialized with the same form name (reduxForm({ form: 'myForm' })(...)). Some left-overs after refactoring. Removing one of these two reduxForm call fixed it for me. Hope this helps someone.

[dfalt]

@fakiolinho, @adamfaryna, @jasperkuperus and anyone else having a similar issue trying to pass an onSubmit handler to handleSubmit like:

<form onSubmit={handleSubmit(this.onSubmit)}>
...
</form>

I believe the solution is to use the Form component which was added in version 6.4.0 (at least according to the docs). Switching out <form> for <Form> immediately resolved my issue, and the documentation seems to support that this is the component's intended use case:

The Form component is a simple wrapper for the React

component that allows the surrounding redux-form-decorated component to trigger its onSubmit function.

It is only useful if you are:

• performing your submission from inside your form component by passing onSubmit={this.props.handleSubmit(this.mySubmitFunction)} to your component
• AND EITHER:
  
  
  
  • initiating your submission via the submit() Instance API (i.e. calling it directly on a reference to your decorated form component)
  
  
  • initiating your submission by dispatching the submit(form) action
  
  

[nikola1970]

@dfalt Thanks! Works well!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.