Field error while using redux form in React js - reactjs

Question

I was trying to do some form validations in react js , while Using redux form am facing one error Field must be inside a component decorated with reduxForm() .
i just searched for this error on web but didn't get any solution for that .
Reference Link : http://redux-form.com/6.8.0/examples/simple/ .
Here is my code ,
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
export class EditProfile extends Component {
render() {
console.log("hello welcome");
const { handleSubmit, pristine, reset, submitting } = this.props;
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text"/>
</div>
</form>
);
}
}
export default reduxForm({
form: 'editForm'
})(EditProfile)
What i did wrong in my code , can someone clarify me .

Answer 1

You have both default export (which is decorated with reduxForm) and named export (not decorated).
I'm assuming you're importing your form like this:
import { EditProfile } from 'EditForm'; // Using named export
Instead you need to import the default one:
import EditProfile from 'EditForm'; // Default export
Technically there's no error, and babel doesn't complain as you're exporting both from the same file. And in some cases it makes sense to export both (e.g. export undecorated one for testing purposes). But in my work I prefer to have only one default export to prevent shooting myself in the foot.

Answer 2

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
export class EditProfile extends Component {
render() {
console.log("hello welcome");
const { handleSubmit, pristine, reset, submitting } = this.props;
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text"/>
</div>
</form>
);
}
}
EditProfile = reduxForm({
form: 'editForm'
})(EditProfile)
export default EditProfile;

Answer 3

I also faced the same issue. The solution is to edit /index.js
and add the following lines of code:
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';
const rootReducer = combineReducers({
form: formReducer,
});
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
registerServiceWorker();