CODEWITHSUNDEEP
reactjsreact-reduxredux-form
Beckham Vinoth
Beckham Vinoth

Reputation: 65

Value is not setted in React-redux-forms

Currently am passing the data to the Form component but it didn't reflected in my value field in Redux form . Actually i would like to do the ng-model(angular js) concept in redux forms . Here i attached my code ,

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

import '../style.less'

class EditProfile extends Component {
 
 //here am getting the json value in 'info'
render() {
    const { handleSubmit, pristine, reset, submitting, errors, info } =      this.props;
   console.log("hello fname?---> "+info.fName);
    return (
      <form onSubmit={handleSubmit}>
         <div>
          <label 
          className="full-name-business-n" 
          htmlFor="fName">Full Name
          </label>
          
          <Field className="text-box-one"
          name="fName"
          component="input"
          type="text"
          onChange={this.handleChange}
          value={info.fName}
          />
          
        </div>
        
        <button 
         className="save-btn btn" 
         type="submit" 
         disabled={pristine || submitting}>SAVE
         </button>
         
      </form>
    );
  }
}

export default reduxForm({
  form: 'editForm'
})(EditProfile)

  1. In the console am getting the value
  2. If i use <input> instead of <Field> mean's am getting the value .

so , where i made a mistake ? can someone clarify me please . [Am beginner to redux-forms].

Upvotes: 0

Views: 77

Answers (1)

Igor Barbashin
Igor Barbashin

Reputation: 921

You're passing the value and handling changes explicitly, but it's recommended that redux-form handle it for you.

All you need is to pass your info as initialValues prop into the form and the form can handle it from there.

So on your page you should have something like this:

<EditProfile
  initialValues={info}
  onSubmit={handleSubmit}
/>

Then in your form this code should be enough

return (
  <form onSubmit={handleSubmit}>
     <div>
      <label 
        className="full-name-business-n" 
        htmlFor="fName">Full Name
      </label>

      <Field className="text-box-one"
        name="fName"
        component="input"
        type="text"
        // You don't need onChange unless you want to have a callback to do something with the value at the same time as it's persisting to redux store
        // onChange={this.handleChange}
        // value={info.fName}
      />

    </div>

    <button 
       className="save-btn btn" 
       type="submit" 
       disabled={pristine || submitting}>SAVE
     </button>

  </form>
);

You can see that your data is saving correctly if you open redux-dev-tools and see actions firing as you type.

By default you don't have access to your values as you type but you can achieve it by adding formValueSelector, but that's another story and most of the time I don't use it.

Upvotes: 2

Related Questions