TanStackT
TanStack•3mo ago•
3 replies
constitutional-coral

Typed errors for useFieldContext?

I'm following the guide on Form Composition on the official website. I really like the idea of being able to abstract some of these fields into their own components. But I'm trying to render the errors that can come from this field by extracting the field state using useStore.

The issue is that useStore(field.store, (state) => state.meta.errors) is returning any[]. and checking the documentation a second time along with the types returned via createFormHookContexts it seems as though that's intentional. I found this a bit weird as my experience with you guys is that you're very strict about typing so I figured I must be doing something wrong.

The result is that I have to do stuff like this: 

import { useStore } from "@tanstack/react-form";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { useFieldContext } from "./hooks/form-context";

export default function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>();

  const errors = useStore(field.store, (state) => state.meta.errors);

  return (
    <FieldGroup>
      <Field>
        <FieldLabel>{label}</FieldLabel>

        <Input
          name={field.name}
          value={field.state.value}
          onChange={(e) => field.handleChange(e.target.value)}
          onBlur={field.handleBlur}
        />

        {errors.map((error: { message?: string }, index: number) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: we need to use the index as the key
          <div key={index} style={{ color: "red" }}>
            {typeof error === "string"
              ? error
              : error.message || "Validation error"}
          </div>
        ))}
      </Field>
    </FieldGroup>
  );
}


It definitely works but I feel like maybe this should be a field group. That also doesn't feel right though so I'm not sure what to do with this. Any ideas?
Was this page helpful?