I'm pretty new to React & Redux-Form and at the moment I am in need of some help.

Basically I have listing page with lists and their edit button. When the edit is clicked, I am showing a modal pop up with the fields and doing a API call to fetch the respective list data.

Could you please let me know how can I pre-populate the fields in the modal pop up with the data received from API call?

A demonstration with a code sample will be much appreciated(like I said I am pretty new to React & Redux & Redux-form). :(

Thanks in advance!

I'm pretty new to React & Redux-Form and at the moment I am in need of some help.

Basically I have listing page with lists and their edit button. When the edit is clicked, I am showing a modal pop up with the fields and doing a API call to fetch the respective list data.

Could you please let me know how can I pre-populate the fields in the modal pop up with the data received from API call?

A demonstration with a code sample will be much appreciated(like I said I am pretty new to React & Redux & Redux-form). :(

Thanks in advance!

• javascript
• html
• reactjs
• redux
• redux-form

• Possible duplicate of programatically-change-redux-form-field-value – Shubham Khatri Commented Mar 1, 2018 at 10:38

4 Answers 4

Here is the flow:

ponentDidMount() {
    this.props.loadClient(); // dispatch an action from your ponent
}

action dispatcher

loadClient() {
 // API call here
}

Store the result in redux reducer

case LOAD_PROFILE_SUCCESS:
  return {
    ...state,
    data: action.result // save your data here
  };

Then add the initialValues props to the @connect decorator

@connect(state => ({
    initialValues: state.profile.data // load the saved data here
  }),
  { loadClient }
)

Example: You could load the intialvalues at reduxForm itself.

let AddUser = props => {
    const { handleSubmit, initialValues } = props;
    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">Name</label>
                <Field name="name" ponent="input" type="text" />
            </div>
            <div>
                <label htmlFor="email">Email</label>
                <Field name="email" ponent="input" type="email" />
            </div>
            <div>
                <label htmlFor="phoneno">PhoneNo</label>
                <Field name="phoneNo" ponent="input" type="text" />
            </div>
            <button type="submit">Submit</button>
        </form>
    );
}

export default AddUser = reduxForm({ form: 'addUser', initialValues: {
  name: "abc",
  email: "[email protected]",
  phoneNo: "1234567890"
} })(AddUser)

Your ponent must have the Form ponent. Rest will be taken care by redux-form.

Note:
Structure of your initialValues must same of form data. Field name and the object property name should be same.

for more detail, you could refer redux-form official page Here

If youre using redux, you just have to map your state in initialValues;

Here's how I do it:

const mapStateToProps = (state) => {
    const { state } = state;
    return {
        initialValues: state,
    }
}

then set enableReinitialize to true

FormName = reduxForm({
    form: 'formname',
    enableReinitialize : true
})(FormName);

then connect your app to your redux store

export default connect(mapStateToProps)(FormName);

Thank you @Sachidhanandhan!

Here's what I did -

1. Defined the reduxForm with enableReinitialize: true
2. In the mapStateToProps of connect(), I initialized the data that I received via API and stored in State with initialValues
3. Connected the reduxForm with connect() => This was the order I missed earlier

It is working like a charm now.

Cheers!

enableReinitialize : boolean [optional] When set to true, the form will reinitialize every time the initialValues prop changes. Defaults to false. If the keepDirtyOnReinitialize option is also set, the form will retain the value of dirty fields when reinitializing.

Set this to true