0

In Formik, I try to use {...formik.getFieldProps('email')} on my input field instead of using value, onChange, and onBlur. But it's not working.

This works :

<input id="email" name="email" type="text" value={formik.values.email} onChange={formik.handleChange} onBlur={formik.handleBlur} />

But this doesn't :

<input id="email" type="text" {...formik.getFieldProps("email")} />

Code is here : https://codesandbox.io/s/formik-pb-with-getfieldprops-83tze?fontsize=14

Any ideas ? Thanks !

Alex B
  • 37
  • 2
  • 9
  • If you console.log(formik.getFieldProps("email")), you will notice it is an array of two objects, not an object. Just follow the docs and do this rather onChange={formik.handleChange} value={formik.values.email} – MiDas Nov 02 '19 at 22:54
  • Thank you MiDas for your reply. I looked at the console, and I saw it is an array of twi objects, but with the expression {...array} am I not supposed to explode the array ? I would like to avoid putting onChange={formik.handleChange} value={formik.values.email} because it is too verbose and I would like to use the shorthand instead. But it doesn't work... – Alex B Nov 03 '19 at 11:49
  • I do get your request but what you are asking for is impossible. – MiDas Nov 03 '19 at 16:23
  • I think it should be though as it is mentioned on the documentation : https://jaredpalmer.com/formik/docs/tutorial#getfieldprops but for some reason I can't make it work... – Alex B Nov 04 '19 at 08:25
  • Ensure you are on the latest version currently 2.0.3. if the issue persist then file an issue in the official repo – MiDas Nov 04 '19 at 08:37

1 Answers1

2

As MiDas said, what you are doing should work if you are on latest version.

I'll mention an even more concise alternative: the Field component.

Field component handles the field property propagation for you.

Simple example:

<Field name="email" type="text" />

Notice that you don't need to do {...formik.getFieldProps("email")}, or any other "boilerplate".

Related to Field is useField, which can be used to make custom form components just as easy to use - no "boilerplate" needed.

A custom component:

function TextInputWithLabel({ label, ...props }) {
  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
  // which we can spread on <input> and also replace ErrorMessage entirely.
  const [field, meta] = useField(props);
  return (
    <>
      <label
        htmlFor={props.id || props.name}
        css={{ backgroundColor: props.backgroundColor }}
      >
        {label}
      </label>
      <input className="text-input" {...field} type="text" {...props} />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
}

Usage:

<TextInputWithLabel name="input1" label="Random comment" />

As seen in code from codesandbox.

ToolmakerSteve
  • 18,547
  • 14
  • 94
  • 196
  • Thank you ! It's a nice alternative. But I also would like to know why {...formik.getFieldProps('email')} doesn't work and show errors here : https://codesandbox.io/s/formik-pb-with-getfieldprops-83tze?fontsize=14 . I definitely get error messages on the console even though I use Formik latest version. As Midas said I sent an issue on the official repo (https://github.com/jaredpalmer/formik/issues/1992) but no answer yet. – Alex B Nov 12 '19 at 18:11
  • @AlexB - I've put the following comment on that repo: *""it's not working" isn't enough information to help you. Describe exactly what you did, what you expected to happen, and what did happen."* – ToolmakerSteve Nov 12 '19 at 22:10
  • @AlexB - also, your code sandbox seems to work for me. When I enter "aa@aa.com" - a valid email - there is no error message. "aa" says its bad, which is correct. OTOH, there also *isn't* a message when it first appears - there should be, as it is empty. Maybe have to do something to trigger an update. If add characters, then delete them, get the empty error message. – ToolmakerSteve Nov 12 '19 at 22:11
  • @AlexB - I'm testing on latest Chrome, under Windows 10. – ToolmakerSteve Nov 12 '19 at 22:57