CODEWITHSUNDEEP
javascriptreactjsredux-formreact-boilerplate
chizik
chizik

Reputation: 21

Redux: form input fields stay blank

I installed redux-form using this template, attached the reducer and checked that it is running fine in redux devtools.

I can see the actions flow is good while typing but the form values and the input are empty after each keystroke.

There are no errors in the console and I can't find any clues.

I'm missing something small, maybe it's a component rendering or maybe it's about the react version...

My packages:

"react": "15.3.2",
"redux-form": "^6.2.0",

My login form:

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


const renderField = ({ input, label, type, meta: { touched, error } }) => {
  console.log(input);
  return (
    <div>
      <label>{label}</label>
      <div>
        <input {...input} placeholder={label} type={type} />
        {touched && error && <span>{error}</span>}
      </div>
    </div>
  );
};

class FormLogin extends React.Component { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    handleSubmit: React.PropTypes.func
  };
  render() {
    const { error, handleSubmit } = this.props;
    return (
      <div>
        <input type="text" name="ah1" />
        <form onSubmit={handleSubmit}>
          <input type="text" name="ah2" />
          <div>
            <Field id="username" name="username" type="text" component={renderField} label="Username" />

          </div>
          <div>
            <Field id="password" name="password" type="text" component={renderField} label="Password" />
          </div>
          {error && <strong>{error}</strong>}
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({
  form: 'FormLogin'
})(FormLogin);

Upvotes: 1

Views: 2147

Answers (2)

JTE
JTE

Reputation: 1321

For me, I didn't name the reducer the exact name from the examples, which unfortunately lead to this difficult-to-debug error.

Make sure the reducer is listed as 'form: formReducer' as the example shows.

Upvotes: 4

chizik
chizik

Reputation: 21

found the problem if anyone is getting here to find an answer.

there is a hack to fix it. you can find more in here: https://github.com/mxstbr/react-boilerplate/issues/958

Upvotes: 1

Related Questions