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

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}> 😢

@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.

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.

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}
/>

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

@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.

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>

@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 <form> 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 <form> 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

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

const handleSubmit = this.props

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

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

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.

@EnriqueSalaza code started working after gone through your example