Field error while using redux form in React js

user_6191901 0
Viewed 15399

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 .

redux-form redux reactjs
3 Answers
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;
user_100631330

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