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

Question

I`m using the redux-form library and get this error: Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

The Form:

TariffForm.js

import React from "react";
       import { Field, reduxForm } from "redux-form";
       import { required } from "../../../../../../utils/validators/validators.js";
       import Input from "../../../../../Common/FormControls/FormsControls";

       let TariffForm = props => {

         const cancelSubmit = (event) => {
           event.preventDefault();
           props.cancelCreate();
         };

         debugger;
         return (
               <form onSubmit={props.handleSubmit}>
                 <div>
                   <Field
                       name={"tariffName"}
                       component={Input}
                       label={"tariffName"}
                   />
                 </div>
                 <div>
                   <Field
                       label="tariffSpeed"
                       name={"tariffSpeed"}
                       component={Input}
                   />
                 </div>
                 <div>
                   <Field
                       label="tariffPrice"
                       name={"tariffPrice"}
                       component={Input}
                   />
                 </div>
                 <div>
                   <button>Добавить</button>
                   <button  onClick={cancelSubmit} type="submit">Отменить</button>
                 </div>
               </form>
         );
       };

       TariffForm = reduxForm({
         // a unique name for the form
         form: "tariff"
       })(TariffForm);


       export default TariffForm;

And The parent component where I render TariffForm:

AllTariffs.js

https://i.sstatic.net/BXjb0.jpg

Answer 1

This may help you -

import React from "react";
import { Field, reduxForm } from "redux-form";
import { required } from "../../../../../../utils/validators/validators.js";
import Input from "../../../../../Common/FormControls/FormsControls";

   let TariffForm = props => {

     const cancelSubmit = (event) => {
       event.preventDefault();
       props.cancelCreate();
     };

     debugger;
     return (
           <form onSubmit={props.handleSubmit}>
             <div>
               <Field
                   name={"tariffName"}
                   component={Input}
                   label={"tariffName"}
               />
             </div>
             <div>
               <Field
                   label="tariffSpeed"
                   name={"tariffSpeed"}
                   component={Input}
               />
             </div>
             <div>
               <Field
                   label="tariffPrice"
                   name={"tariffPrice"}
                   component={Input}
               />
             </div>
             <div>
               <button>Добавить</button>
               <button  onClick={cancelSubmit} type="submit">Отменить</button>
             </div>
           </form>
     );
   };

   const onSubmit = (values, dispatch) => {
       dispatch(    // your submit action //      );
    };


   TariffForm = reduxForm({
     // a unique name for the form
     form: "tariff",
     onSubmit
   })(TariffForm);


   export default TariffForm;

The values variable will hold fields data.