redux-form: Store state not showing in Input element

The form detailed below contains one Field for a first name and the value of that field’s input is initialized to the value of ‘initialName’ as specified in the initialValues object given to mapStateToProps. Upon loading the component, the store contains the given initial value. However, the input element never displays that value. How does one make the controlled component display the stored value?

Removing the {...input} from the <input> element in renderField does not seem to help as then the input field is non-responsive and the form only dispatches one letter CHANGE actions, overwriting the value in the store with one letter strings. In addition, in this case the ending BLUR action overwrites the stored value with an empty string when the field is deactivated.

Another issue is that the handleSubmit function provided by props should pass the validated form values to the onSubmit function but instead passes the initial value of ‘initialName’. Also, when there are errors, the handleSubmit function does not prevent passing control to onSubmit and no error messages are displayed in the rendered form element.

Could someone please explain why and how to fix it? Thanks!

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


const renderField = ({ input, label, value, type, meta: { touched, error }, onChange }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} value={value} type={type} onChange={onChange} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);


let SettingsForm = (props) => {

  const onSubmit = (formProps) => {
    alert("Name passed to onSubmit: '"+ formProps.firstName +"'");
    console.log("Form props passed by handleSubmit: ", formProps);
  }

  const { handleSubmit } = props;

  return (
      <form onSubmit={handleSubmit(onSubmit.bind(this))}>
        <div>
          <h3>Personal Info</h3>
          <div>
            <Field
              name="firstName"
              component={renderField}
              type="text"
              label="First name"
              onChange={() => {}}
              />
          </div>
        </div>
        <button type="submit">Submit</button>
      </form>
  );
}


const validate = (values) => {
  const errors = {};
  console.log("values at validation: ", values);
  if (!values.firstName) {
    errors.firstName = 'Enter your first name';
  }
  console.log("The current set of errors is", errors);
  return errors;
}


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

// redux-form decorator
SettingsForm = reduxForm({
  form: 'userSettingsForm',
  validate,
})(SettingsForm);

// Important: connect only after calling reduxForm!!!
export default connect(mapStateToProps)(SettingsForm);

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 16

Most upvoted comments

PS: In my personal experience I had similar issue where state had value, but it was never passed to input. That was beacuse I use immutable and I imported redux-form decorator:

import { reduxForm } from 'redux-form';

Instead of:

import { reduxForm } from 'redux-form/immutable';

Maybe someone would find this useful. I’m going to add custom linting rule to notify me when I use wrong import.

niksajanjic on Nov 4, 2016

Yes, I’ve added the reducer in the correct combineReducers() call (as shown below) and the redux store’s state is even changed correctly under userSettingsForm > values.

import { reducer as formReducers } from 'redux-form';

export const someReducers = combineReducers({
    ...,
    form: formReducers,
});

The fact that the code works on codepen suggests that the issue is related to some incompatibilities between redux-form and the other libraries currently in use in my setup and it seems to be an information flow issue from the store state to the respective fields. Even the onSubmit function is given the initial value of the field in spite of the value having been successfully set in store.

It’s difficult to continue investigating this since there are no warnings or error messages that give any indication of what the conflict may be. Therefore I will no longer continue with redux-form at this time. Others may still comment here or close the ticket as they please.

mmkari on Oct 14, 2016

thanks for the last two comments. I think the example with ImmutableJS should be made more prominent especially considering that react-boilerplate uses immutable data. Took me some googling to get here

piuccio on Mar 8, 2017

Thanks for the commen @niksajanjic I had the same problem, but after I changed the redux-form import from import { reduxForm } from 'redux-form to import { reduxForm } from 'redux-form/immutable . It works!

The introduction about using immutableJS with redux-form is only set in the Immutable JS Example . Maybe it’s better to give a warning in console when using immutable js but with wrong reduxForm import.

wayne163 on Jan 24, 2017

@mmkari I am experiencing the exact same issue for all examples and for your project locally. I have been having the same issues with my project for two days, so I’m a bit relieved to know it’s not just me.

Once I have the time I will post the deets about my environment.

gocamille on Oct 21, 2016

Thanks for the comment @JosephEarl !

However, I’ve purposely overwritten the onChange handler so that the store would not receive so many unnecessary CHANGE actions. The store fields will get updated by the BLUR action in any case. Removing the onChange={() => {}} overwrite nor any other solution that I’ve tried solves the following problems that still persist:

the initial value of ‘initialName’ does not show up in the field even though it shows up in the store and the field is controlled by redux-form.
even as the value in the field is manually entered and the corresponding redux-store value userSettingsForm > values > firstName reflects that change correctly, upon submit the redux-form provided function handleSubmit neither performs validation nor passes the actual form input value (again, correctly set in store) to the passed and bound onSubmit function. The value that gets passed to onSubmit is for some inexplicable reason the initial value of the field.

It’s also worth mentioning that the official examples don’t work either and show the same issues relating to initialized fields not showing their values and those of the submit handler.

Has no one else encountered these issues?

mmkari on Oct 13, 2016