No data passed in submit method of Redux-form - reactjs

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?

Answer 1

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);

Answer 2

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/