REDUX-FORM error on handleSubmit

Question

I am getting error while using redux-form

Error msg in console:

• bundle.js:32511 Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop(…)

the above error appeared on page load and button click

Please refer to the below code sample which cause the console error.

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';

class PostsNew extends Component {

  render() {
    const { fields: { title, categories, content }, handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.props.createPost)}>
        <h3>Create a new Post</h3>

        <div className="form-group">
          <label>Title</label>
          <input type="text" className="form-control" {...title}/>
        </div>

        <div className="form-group">
          <label>Categories</label>
          <input type="text" className="form-control" {...categories}/>
        </div>

        <div className="form-group">
          <label>Content</label>
          <textarea className="form-control" {...content}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

export default reduxForm({
  form: 'PostsNewForm',
  fields: ['title', 'categories', 'content']
}, null, { createPost })(PostsNew);

---

This was a step by step follow of StephenGrider redux tutorial

Thanks in advance :)

Answer 1

If PostsNew is Container (if this is directly invoked form Routes) then you have to make handleSubmit function instead of taking from this.props

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';

class PostsNew extends Component {

  handleSubmit(formValues){
    console.log(formValues);
    //do what ever you want
  }

  render() {
    const { fields: { title, categories, content } } = this.props;
    return (
      <form onSubmit={this.handleSubmit(this.props.createPost)}>
        <h3>Create a new Post</h3>

        <div className="form-group">
          <label>Title</label>
          <input type="text" className="form-control" {...title}/>
        </div>

        <div className="form-group">
          <label>Categories</label>
          <input type="text" className="form-control" {...categories}/>
        </div>

        <div className="form-group">
          <label>Content</label>
          <textarea className="form-control" {...content}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

OR
In case PostsNew is React Component that is used inside a Container then you can pass handleSubmit in props of PostsNew

<PostsNew
 handleSubmit={ (values) => {console.log(values)}}
/>

Answer 2

You need to pass onsubmit props from parent component

import React from 'react';
import { connect } from 'react-redux';
import { initialize } from 'redux-form';
import PostsNew from './PostsNew';


class App extends React.Component {

  handleSubmit(data) {
    console.log('Submission received!', data);
    this.props.dispatch(initialize('contact', {})); // clear form
  }

  render() {
    return (
      <div id="app">
        <h1>App</h1>
        <PostsNew onSubmit={this.handleSubmit.bind(this)}/>
      </div>
    );
  }

}

export default connect()(App);

Answer 3

I was running into the same problem until I explicitly imported connect into my file. After that, I was able to call this.props.createPost successfully.

This is my solution:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form'
import { createPost } from '../actions/index';
import { connect } from 'react-redux';

class PostsNew extends Component {
    render() {
        const { handleSubmit } = this.props;
        return (
             <form onSubmit={handleSubmit(this.props.createPost)}>
             <h3>Create a New Post</h3>
             <div className="form-group">
                 <label>Title</label>
                 <Field name="title" component="input" type="text" className="form-control" placeholder="Title" />
             </div>
             <div className="form-group">
                <label>Categories</label>
                <Field name="categories" component="input" type="text" className="form-control" placeholder="Title" />
             </div>
             <div className="form-group">
                <label>Content</label>
                <Field name="content" component="textarea" type="text" className="form-control" placeholder="Title" />
             </div>
             <button type="submit" className="btn btn-primary">Submit</button>
         </form>
        );
    }
}

export default connect(null, {createPost})(reduxForm({
    form: 'PostsNew'
})(PostsNew));

Answer 4

This works perfectly. Check your action creator there should be a typo error in your action creator. Please refer the below action creator. If you followed the steps as he mentioned, this should work perfectly. What the error says is you don't have something called createPost in your props. Further more you can find my working project here in github.

export function createPost(props) {
  console.log(props);
  const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, props);
  return {
    type: CREATE_POST,
    payload: request
  };
}

Answer 5

please install version 5 of redux-form.

npm install --save redux-form@5