How to pass around controls / FieldMetadata safely

[titong0]

I am struggling trying to tell typescript that a prop should be of the same type as returned by fields. I'd love better documentation on props and just passing around types in general. Basically, is there a helper for doing this?

const a = () =>
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: profileSchema });
    },
  });
type newProfilePictureType = ReturnType<typeof a>["1"]["newProfilePicture"];

const ProfilePicUpload = ({
  picControl,
}: {
  picControl: newProfilePictureType;
}) => {
  return null
};

[Pouet--]

You can send a prop which is of type FieldName as <ProfilePicUpload picControl={yourField.name} />
And retrieve it in your child Component via const [meta] = useField(picControl)

'meta' will be of type FieldMetadata.

Does it help ?

[titong0]

The main issue I find with that approach is that I do not get any type safety, since useField needs a generic of fieldSchema, passing only the name works but does not give the function enough information about my form. All I'd like is to do something like

const propSchema = z.object({
  price: z.number().nullable(),
  imageId: z.number().optional(),
});

const EditProp = () => {
  const lastResult = useActionData<typeof action>();
  const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: propSchema });
    },
    defaultValue: { ...defaultValues },
    shouldValidate: "onSubmit",
  });

  return (
    <div>
      <Form {...getFormProps(form)} className="space-y-2">
        <label className="block mb-1">Price</label>
        <Input
          step={1000}
          {...getInputProps(fields.price, { type: "number" })}
        />
        <ImagePicker />
      </Form>
    </div>
  );
};
function ImagePicker({
  field,
}: {
  //      👇 this is the part I'd like to have typed
  field: FormField<typeof propSchema, "imageId">;
}) {
  return <Input {...getInputProps(field, { type: "number" })} />;
}

[balzdur]

I think there is a misunderstood. Try this :

function ImagePicker({
  field,
}: {
  field: FormMetadata<number>;
}) {
  return <Input {...getInputProps(field, { type: "number" })} />;
}

You can find more info :

• here in the doc
• here for concrete UI elements integration examples

[bbaterdene-gh]

Maybe this helps

const Acomp = ({
  formFields,
}: {
  formFields: ReturnType<
    FormMetadata<z.infer<typeof yourschema>, string[]>["getFieldset"]
  >;
}) => {
  return <div></div>;
};


<Acomp formFields={fields} />