title: (Redux Form) You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
body: <p>I'm a super React-redux beginner and just started working on my first personal project. I'm trying to build submit form using Redex-form and I got the first error I never get over... This is the only place I can have a question. </p>
  
  <p>If you want to see the entire project files, please refer to my github
  <a href="https://github.com/jlee380/cal-frontend" rel="nofollow noreferrer">https://github.com/jlee380/cal-frontend</a></p>
  
  <p>This is <strong>submit_form.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { reduxForm } from 'redux-form';
  import { submitForm } from '../actions/action_submit_form';
  // import { Link } from 'react-router';
  
  
  class SubmitForms extends Component {
     onSubmit(props) {
       this.props.submitForm(props)
         .then(() =&gt; {
            console.log("good submit");
         });
     }
  
    render() {
      const { fields: { gender, age, height, weight, activity }, 
      handleSubmit } = this.props;
  
  return (
      &lt;form onSubmit={handleSubmit(this.props.submitForm)}&gt;
      &lt;div className="form-group"&gt;
        &lt;label className="control-label"&gt;Gender&lt;/label&gt;
        &lt;select type="gender" className="form-control" id="gender_id" name="gender_name" { ...gender }&gt;
          &lt;option&gt;Male&lt;/option&gt;
          &lt;option&gt;Female&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div className="form-group"&gt;
        &lt;label className="control-label"&gt;Age&lt;/label&gt;
        &lt;input type="age" className="form-control" id="age_id" name="age_name" { ...age } /&gt;
      &lt;/div&gt;
      &lt;div className="form-group"&gt;
        &lt;label className="control-label"&gt;Height&lt;/label&gt;
        &lt;input type="height" className="form-control" id="height_id" name="height_name" { ...height } /&gt;
      &lt;/div&gt;
      &lt;div className="form-group"&gt;
        &lt;label className="control-label"&gt;Weight&lt;/label&gt;
        &lt;input type="weight" className="form-control" id="weight_id" name="weight_name" { ...weight } /&gt;
      &lt;/div&gt;
      &lt;div className="form-group"&gt;
        &lt;label className="control-label"&gt;Activity&lt;/label&gt;
        &lt;select type="activity" className="form-control" id="activity_id" name="activity_name" { ...activity }&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div className="form-group"&gt;
        &lt;button type="submit" className="btn btn-primary"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  );
  }
  }
  
  export default reduxForm({
    form: 'SubmitNewForm',
    fields: ['gender', 'age', 'height', 'weight', 'activity']
  }, null, { submitForm })(SubmitForms);
  </code></pre>
  
  <p>This is action creator <strong>action_submit_form.js</strong></p>
  
  <pre><code>import axios from 'axios';
  
  export const ADD_POST = 'ADD_POST';
  const BASE_URL = 'http://138.197.166.14:8000';
  
  
  export function submitForm(props) {
    console.log('action is hit:');
    const calculatedResult = axios.get(`${BASE_URL}/getcalories`);
  
    return {
      type: ADD_POST,
      payload: calculatedResult
    };
  }
  </code></pre>
  
  <p>This is reducer <strong>index.js</strong>, <strong>reducer_submit_form.js</strong></p>
  
  <pre><code>import reducerSubmitForm from './reducer_submit_form';
  import { combineReducers } from 'redux';
  import { reducer as formReducer } from 'redux-form';
  
  const rootReducer = combineReducers ({
    post: reducerSubmitForm,
    form: formReducer
  });
  </code></pre>
  
  <p>.</p>
  
  <pre><code>export default rootReducer;
  
  import { ADD_POST } from '../actions/action_submit_form';
  
  const INITIAL_STATE = { all: [], post: null };
  
  export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
      case 'ADD_POST':
        return{ ...state, all: action.payload.data };
      default:
        return state;
    }
  
  }
  </code></pre>