No data passed in submit method of Redux-form

Question

I want to send the input values to the api. I used the code from below link, to get the input values in the submit method, but though the submit method gets called, the variable is empty.

How to handle redux form submitted data

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import ContactForm from "./ContactForm";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import { Provider } from "react-redux";

import rootReducers from "./reducers";

const store = createStore(rootReducers);

ReactDOM.render(
  <Provider store={store}>
    <ContactForm />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

reducer.js

import { combineReducers } from "redux";
import { reducer as formReducer } from "redux-form";

const rootReducer = combineReducers({
  form: formReducer
});
export default rootReducer;

ContactForm.js

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

class ContactForm extends Component {
  submit(formValues) {
    console.log(formValues);
  }
  render() {
    const {
      fields: { firstName, lastName, email },
      handleSubmit
    } = this.props;
    return (
      <form onSubmit={handleSubmit(this.submit)}>
        <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>
    );
  }
}

ContactForm = reduxForm({
  form: "contact",
  fields: ["firstName", "lastName", "email"]
})(ContactForm);

export default ContactForm;

I am getting formValues as empty. Could anyone please help me with it?

It is unclear to me what the handleSubmit function is doing. It takes in this.submit, but what does it do with it? Can you please share the code for handleSubmit — Trevor Johnson
– Trevor Johnson, Commented Apr 10, 2019 at 5:37
@TrevorJohnson : There is no implementation for handleSubmit. You may check here : redux-form.com/5.3.1/#/getting-started?_k=8q7qyo — Nands
– Nands, Commented Apr 10, 2019 at 6:38
@sathishkumar : If you see my above code, you would notice : const rootReducer = combineReducers({ form: formReducer }); — Nands
– Nands, Commented Apr 10, 2019 at 6:39
Then it looks like you don’t need to pass in your own function to handleSubmit. Look at the example there closely. They just specify handleSubmit as the function to run when the onSubmit event occurs. — Trevor Johnson
– Trevor Johnson, Commented Apr 10, 2019 at 6:41

Nands · Accepted Answer · 2019-04-10 10:13:56Z

It seems the example was for version 5.3.1 of Redux-form, while I had installed 8.1.0 version. Below is the working code:

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

const submit = values => {
  console.log(values);
};

class ContactForm extends Component {
  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(submit)}>
        <div>
          <label>First Name</label>
          <Field name="firstName" component="input" type="text" />
        </div>
        <div>
          <label>Last Name</label>
          <Field name="lastName" component="input" type="text" />
        </div>
        <div>
          <label>Email</label>
          <Field name="email" component="input" type="email" />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default reduxForm({
  form: "contact"
})(ContactForm);

Ziiiijun · Accepted Answer · 2021-08-11 02:16:02Z

0

You probably need to use instead of inside the form, to connect your input data with redux store.

https://redux-form.com/8.3.0/examples/submitvalidation/

answered Aug 11, 2021 at 2:16

Ziiiijun

32 bronze badges

Collectives™ on Stack Overflow

No data passed in submit method of Redux-form

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related