Field error while using redux form in React js

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 .

Igor Barbashin · Accepted Answer · 2017-07-06 06:17:37Z

15

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.

answered Jul 6, 2017 at 6:17

Igor Barbashin

9219 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SuperUberDuper Over a year ago

yeah but then you need to pass in some sad mock store which I dont want??

Sadam Hussain MCA · Accepted Answer · 2018-07-11 06:59:25Z

1

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;

answered Jul 11, 2018 at 6:59

Sadam Hussain MCA

111 bronze badge

Comments

Remolten · Accepted Answer · 2020-07-02 20:46:19Z

0

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

edited Jul 2, 2020 at 20:46

Remolten

2,7022 gold badges27 silver badges33 bronze badges

answered Jul 2, 2020 at 9:34

Preeti Garg

114 bronze badges

Collectives™ on Stack Overflow

Field error while using redux form in React js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related