Reduks generates pre-filled data
I am using redux form, when loading component I get values for my text fields from api response, when I have these values filled and submitted since I have not touched the fields - I see validation errors - how are they empty - how to pass these existing values to props?
const emailValfromapi = this.props.data && this.props.data.email ? this.props.data.email : [];
const { handleSubmit, fields: { email, abc, def, etc } } = this.props;
<fieldset className="form-group">
<div className="input-wrapper">
<input value={emailValfromapi} id="email" {...email} type="email" className={email.touched && email.error ? 'error-red' : ''} required />
<label className="input-label" htmlFor="Email">To</label>
{ email.touched && email.error && <div className="alert-danger"> { email.error } </div> }
</div>
</fieldset>
source to share
In redux-form
you don't pass the values for the inputs themselves, but instead use a componentField
to wrap the inputs and let the library handle the data bindings. In this case, the input is populated but redux-form
is unaware of its existence because it is not wrapped in a component Field
. In this example, you are good at basic component usage Field
.
Also, to pass initial values to the form component, you need to use a initialValues
prop (best described in this example ).
Hope this helps!
source to share