CODEWITHSUNDEEP
reactjsredux-form
joethemow
joethemow

Reputation: 1773

Why does redux form return string instead of the object?

I am trying to access the touched property on my redux form, but for some reason when I print the field props I only the value instead of the object. What am I missing?

import { reduxForm, Field } from 'redux-form';

render() {
  const { fields: { email, phone }, handleSubmit } = this.props;
  console.log(email) //prints just the value "email" instead of the field object with the touched method, etc. When I do console.log(email.touched) I get undefined error.
  return (
    <form onSubmit={handleSubmit(this.onSubmit)}>
       <Field name="email" component="input" type="email" { ...email } />
       <Field name="phone" component="input" type="number" { ...phone } />     
    </form>
  );


}


export default ReduxFormTest = reduxForm({
  form: 'uniqueForm',
  fields: ['email', 'phone']
})(TestClass);

Upvotes: 1

Views: 241

Answers (2)

Erik R.
Erik R.

Reputation: 7272

You are confusing v5 syntax with v6 syntax. In v6, your decorated form component is no longer passed this.props.fields. Re-read the migration guide, like @tyler-iguchi said.

Upvotes: 0

Tyler Iguchi
Tyler Iguchi

Reputation: 1074

There were breaking changes in redux-forms from v5 to v6. Previously you could do something similar to what you have to access the touched field. If you want to do something similar to see if there are errors on a field, you need to create your own component to pass to redux-form's Field component.

Your custom component

const CustomComponent = function(field) {
  return (
    <div>
      <input
        type={field.type}
        {...field.input}
        />
      {field.meta.touched && field.meta.error && <div className='error'>{field.meta.error}</div>}
    </div>
  )
}

Then using it with the Field component

<Field name="my-prop" component={CustomComponent} />

Also take a look at the migration guide, hope this helps!

Upvotes: 2

Related Questions