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;
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);