Formik: Difference between field.value and meta.value in useField hook

[Its-Alex]

📖 Documentation

Hi, this can be good to understand why value is duplicated in useField hook, we can find it in meta and field.

Explain if this is exactly the same or if there are some differences in documentation.

I ask this question because switching from one to another in my case fix a bug.

Thanks

[koredefashokun]

@Its-Alex which did you use? I'm confused, and I'm not sure which to use.

[Its-Alex]

@koredefashokun I use the one returned within meta, but I don't know why this one works and not the one from field

[koredefashokun]

Thanks @Its-Alex. I'm not sure what the difference is as well. I also think this is something that should be documented better.

[Its-Alex]

@jaredpalmer Can you answer this ?

[JimFung]

hi @Its-Alex. Out of curiosity, what was the bug that you ran into?

[Its-Alex]

Hi @JimFung, one of those values was undefined

[ddluc]

+1 to this.

Unclear what the difference is between field.value and meta.value is—perhaps it's just for the utility, to be able to view the value on either object?

However, it would be nice to do the following:

<Field name="First Name">
   {({ field, meta }) => (
      <TextField label="First Name" placeholder="Enter First Name" {...field} {...meta} />
    )}
</Field>

But doing so creates a duplicate value prop to the TextField component.

Maybe I'm just being lazy, but when working on large forms, having to explicitly pass each meta field directly starts to add up, in terms of boilerplate:

<Field name="First Name">
   {({ field, meta }) => (
      <TextField 
          label="First Name" 
          placeholder="Enter First Name"  
          error={meta.error}
          touched={meta.touched}
          ....
         {...field}
       />
    )}
</Field>