TanStackT
TanStack•9mo ago•
8 replies
sacred-rose

Incorrect type for field.state.meta.errors?

When my form first renders, field.state.meta.errors is undefined when the Typescript type argues it is always an array. I have a simple form with two fields which are validated with zod. 
const productSchema = z.object({
  name: z.string().min(1, "A name is required"),
  allowance: z
    .number()
    .min(1, "Allowance must be at least 1")
    .int("Allowance must be an integer"),
});

const form = useForm({
  defaultValues: {
    name: "Dataset Storage",
    allowance: 1000,
  },
  validators: {
    onChange: productSchema,
  },
})


Then the react component 
<form.Field name="name">
  {(field) => (
    <TextField
      autoFocus
      error={field.state.meta.errors.length > 0}
      helperText={field.state.meta.errors.map((error) => error?.message)[0]}
      label="Name"
      value={field.state.value}
      onBlur={field.handleBlur}
      onChange={(e) => field.handleChange(e.target.value)}
    />
  )}
</form.Field>

errors on both the errors and helperText props because I'm accessing on undefined. 
Unhandled Runtime Error

TypeError: field.state.meta.errors is undefined

Yet, Typescript argues it's an array. What's going on with the tanstack/form types here?
Was this page helpful?