CODEWITHSUNDEEP
reactjsredux-form
splendidDev
splendidDev

Reputation: 31

Redux form pre populated data

I am using a redux form, on load of the component I am getting values for my text fields from an api response, when I have these values populated and submitted as I have not touched the fields - i am seeing validation errors - like they are 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>

Upvotes: 3

Views: 4243

Answers (1)

jakee
jakee

Reputation: 18556

In redux-form you do not pass in the values for inputs yourself, but instead use the Field component to wrap inputs and let the library handle the data bindings. In this case the input is populated, but redux-form has no knowledge of its existence, because it's not wrapped in a Field component. This example gives you a good rundown on the basic use of the Field component.

Additionally, to pass initial values to the form component, you need to use the initialValues prop (best described by this example).

Hope this helps!

Upvotes: 3

Related Questions