Object form values is empty when passed to handleSubmit func

Hi,

I experienced some trouble with redux-form.

So I switch for v6.0.2 instead of v6.2.0 because a friend use this previous version.

Then I have issues with the inputs, wich won’t fill while typing so I make my own renderComponent but speficying the value props as :

const TextField = (props) => {
  const { input, meta, ...rest } = props;

  return (
    <input {...input} {...rest} onChange={input.onChange} value={rest.value}/>
  );
};

Now, my inputs fill in but my Object form values is empty in my submit handler. Next the two components in game.

Parent Smart Component

/*
 *
 * SubscriptionPage
 *
 */

import React from 'react';
import { connect } from 'react-redux';
import { Grid, Row, Col } from 'react-flexbox-grid';
import SubscriptionLocalForm from './SubscriptionLocalForm';

import selectSubscriptionPage from './selectors';
import { subscription } from './actions';

import styles from './styles.css';

export class SubscriptionPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  submit = (data) => {
    console.log(data);
  };

  render() {
    return (
      <Grid>
        <Row>
          <Col xs={6}>
            <h3 className={styles.title}>Inscrivez-vous pour faire des recherches en illimités, recevoir des newsletters...</h3>
          </Col>
          <Col xs={6}>
            <SubscriptionLocalForm onSubmit={this.submit} />
          </Col>
        </Row>
      </Grid>
    );
  }
}

SubscriptionPage.propTypes = {
  submit: React.PropTypes.func,
};

const mapStateToProps = selectSubscriptionPage();

function mapDispatchToProps(dispatch) {
  return {
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SubscriptionPage);

Child “Dumb” Component

/**
*
* SubscriptionLocalForm
*
*/

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

import styles from './styles.css';

const TextField = (props) => {
  const { input, meta, ...rest } = props;

  return (
    <input {...input} {...rest} onChange={input.onChange} value={rest.value}/>
  );
};

const SubscriptionLocalForm = (props) => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field name="email" component={TextField} type="email" placeholder="Email" />
      <Field name="password" component={TextField} type="password" placeholder="Mot de passe" />
      <Field name="confirmedPassword" component={TextField} type="password" placeholder="Confirmez votre mot de passe" />
      <button type="submit">
        <span>Essayer gratuitement</span>
        <span>Pendant 1 mois</span>
      </button>
    </form>
  );
};

export default reduxForm({
  form: 'subscriptionLocal',
  validate: (values) => {
    const errors = {};
    console.log(values);
    console.log(values.get('email'));
    if (!values.get('email')) {
      console.log('email empty');
    }
    console.log(values.get('password'));
    if (!values.get('password')) {
      console.log('password empty');
    }
    return errors;
  },
})(SubscriptionLocalForm);

Thanks for your help !

[niksajanjic]

Perfect, I couldn’t see what is wrong with your code, good news you were able to find it. Just one thing to mention that I stumbled upon. I see you’re using immutable same as I do, so if at some point you end up importing this by mistake:

import { reduxForm, Filed } from 'redux-form';

instead of:

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

You will have similar issue where you have value saved in state but it doesn’t get returned back to your input. This is just a heads-up, it happened to me once and I was pulling my hair out trying to find a source of a problem. Now I’m trying to enforce this to be checked by my Eslint library, but I wasn’t successful with that so far.

[Dalanir]

I find the typo in my code :

export default function createReducer(asyncReducers) {
  return combineReducers({
    route: routeReducer,
    language: languageProviderReducer,
    forms: formReducer,
    ...asyncReducers,
  });
}

Insted of :

export default function createReducer(asyncReducers) {
  return combineReducers({
    route: routeReducer,
    language: languageProviderReducer,
    form formReducer,
    ...asyncReducers,
  });
}

the difference is in the name of the reducer “forms” instead of “form”…