Field error while using redux form in React js

6
votes

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 .

3
reactjsreduxredux-form

3 Answers

13
votes

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.

1
votes
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;
0
votes

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