CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-form
Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

Passing dynamic form values redux-form

I have a prop called profileDetails and I want to use it to set form values. Is the a way to dynamically add multiple form values in redux-form?

I tried values: this.props.profileDetails and values: profileDetails I get Uncaught ReferenceError: <variable> is not defined on both.

EDIT: I tried using values: ... and initialValues: ... in reduxForm({}).

import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { InputField } from '~/shared/components/formFields';

const ProfileEditComponent = ({
  handleSubmit,
  profileDetails,
 }) => (
  <form onSubmit={handleSubmit} className="form-horizontal">
  <Field
    name="first_name"
    type="text"
    component={InputField}
    label="First Name"
    labelClass="col-sm-2"
    inputDivClass="col-sm-10"
    value={profileDetails.first_name}
  />
  </form>
);

export default reduxForm({
  form: 'profile-edit-form',
  destroyOnUnmount: false,
  enableReinitialize: true,
  value: profileDetails // <-- how do I pass profileDetails dynamically?
})(ProfileEditComponent);


// Input component

import React from 'react';
import PropTypes from 'prop-types';

const InputField = ({ ...props }) => (
  <div className="form-group">
    <label
      htmlFor={props.input.name}
      id={props.input.name}
      className={props.labelClass}
    >
      {props.label}
    </label>
    <div className={props.inputDivClass}>
      <input
        type={props.type}
        name={props.input.name}
        className="form-control"
        value={props.input.value}
        {...props.input}
      />
    </div>
  </div>
);

InputField.propTypes = {
  type: PropTypes.string,
  name: PropTypes.string,
  value: PropTypes.string,
  input: PropTypes.shape(),
  label: PropTypes.string,
  labelClass: PropTypes.string,
  inputDivClass: PropTypes.string,
};

InputField.defaultProps = {
  type: '',
  name: undefined,
  value: undefined,
  input: {},
  label: '',
  labelClass: '',
  inputDivClass: '',
};

export default InputField;

Upvotes: 0

Views: 1715

Answers (2)

Topsy
Topsy

Reputation: 1162

You can use initialValues from redux-form, if you already know what value to put in which form.

In your case you want to give a props as value so you need to pass it via mapStateToProps

like so :

function mapStateToProps(state, ownProps) {
  return {
    initialValues: {
      first_name: ownProps.propThatHasFirstName
    }
}


export default reduxForm({
  form: 'profile-edit-form',
  destroyOnUnmount: false,
  enableReinitialize: true,
})(ProfileEditComponent);

Upvotes: 2

Kr42
Kr42

Reputation: 151

you need to initialise your form with redux form like you do, and you have to connect() your form with data in your reducers.

Something like this:

const InitializeProfileEditComponent = reduxForm({
  form: 'profile-edit-form',
  destroyOnUnmount: false,
  enableReinitialize: true,
})(ProfileEditComponent);

const ProfileEditForm = connect(
  state => ({
    initialValues: state.profileDetail, // state in your redux store
  })
)(InitializeProfileEditComponent)

export default ProfileEditForm;

I hope this can help you https://redux-form.com/7.1.2/examples/initializefromstate/

Upvotes: 3

Related Questions