Initialize my form with redux-form

Question

I am facing trouble with initializing my form with redux-form and the 'initialValues' props. I read a lot posts (for instance here) and I don't manage to get it work...

I see that my initialValues is properly set but my fields are not updated with it... Maybe the issue is in my renderBasicField function but I don't know how to fix this.

Otherwise it could also be something like the prop is not populated yet when the component is rendered... But I don't know what to do to make it work as I must rely on mapStateToProps to feed it.

I saw a lot of post about this kind of issues and unfortunately for me I already set up the enableReinitialize property to true :)

Here is my code :

// My component
class ProfileForm extends React.Component {

  render () {
    console.log(this.props);
    const { handleSubmit } = this.props;
    const messageClassname = this.props.errorMessage !== undefined ? stylesShared.errorMessage : this.props.confirmationMessage !== undefined ? stylesShared.confirmationMessage : '';
    return (
      <div>
        <div>
          <div>
            <form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}>
              <div>
                <h4>Votre profil</h4>
              </div>
              <div className={messageClassname}>
                {this.props.errorMessage &&
                <span>{this.props.errorMessage}</span>
                }
                {this.props.confirmationMessage &&
                <span>{this.props.confirmationMessage}</span>
                }
              </div>
              <div>
                <Field name='firstname' type='text' label='Prénom' component={renderBasicField} />
              </div>
              <div>
                <Field name='lastname' type='text' label='Nom' component={renderBasicField} />
              </div>
              <div>
                <Field name='email' type='email' label='Email' addon='@' component={renderBasicField} />
              </div>
              <div>
                <Field name='telephone' type='text' label='Téléphone' component={renderBasicField} />
              </div>
              <div>
                <Field name='ranking' className='input-row form-group form-control' options={this.getTennisRankingsOptions()} type='select' component={renderSelectField} />
              </div>
              <div>
                <Field name='city' type='text' label='Ville' component={renderBasicField} />
              </div>
              <div>
                <button className='btn btn-info btn-lg center-block' type='submit'>Mettre à jour</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

const reduxFormDecorator = reduxForm({
  form: 'profile',
  enableReinitialize: true,
  validate: validateProfileForm
});

const mapStateToProps = (state) => {
  return {
    initialValues: state.userConnection.loadProfile.user
  };
};

const reduxConnector = connect(
  mapStateToProps,
  null
);

export default reduxConnector(reduxFormDecorator(ProfileForm));

And the code to render my field :

// My renderFunction
export const renderBasicField = ({input, meta: {touched, error}, label, type='text', id, addon, styleClasses, handleChange, controlledAsyncValue}) => {
  const inputStyles = getInputStyles(input.value, touched, error);
  if (controlledAsyncValue !== input.value) {
    input.value = controlledAsyncValue;
    input.onChange(input.value);
  }
  return (<div className={inputStyles.container}>
    {displayInputLabel(inputStyles.input.idInput, label)}
    <div className={addon && 'input-group'}>
      {addon && <span className='input-group-addon'>{addon}</span>}
      <input
        {...input}
        className={classNames(styles.basicInputField, styleClasses)}
        id={id}
        value={input.disabled ? '' : input.value}
        onChange={getOnChangeAction(input.onChange, handleChange)}
        placeholder={label}
        type={type}
        aria-describedby={inputStyles.input.ariaDescribedBy}
      />
    </div>
    {touched && error &&
    displayErrorMessage(error)}
  </div>);
};

I am wondering if I am ignoring the initialValue with my custom renderBasicField function but in that case, I would I retrieve this value to set my input ?

Thanks a lot for your help ! :)

Maybe the prop is not set at the time the form is rendered but I don't know what I could do to solve that issue. I can do it manually with "componentWillMount" but to me I should use the 'native' redux-form solution. — Clement Levesque

Iurii Budnikov Iurii Budnikov · Accepted Answer · 2017-06-23T21:29:21

Try to switch connect and form decorator. It should helps.

export default reduxFormDecorator(reduxConnector(ProfileForm));

Initialize my form with redux-form

1 Answers