TanStackT
TanStack•3mo ago•
12 replies
still-lime

pass tanstack form as props to a component with properly typing

how do i pass a tanstackForm as a prop to another component with correct typing?

i did this but i get typescript errors because well these are not compatible

is there a way to type the withForm without having to guess what all the 14 type fields are?

AppFieldExtendedReactFormApi<{ movements: ListInventoryRegisterAndMovementsByIDResponse; }, FormValidateOrFn<{ movements: ListInventoryRegisterAndMovementsByIDResponse; }> | undefined, ... 11 more ..., { ...; }>' is not assignable to type 'AppFieldExtendedReactFormApi<any, any, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, ... 5 more ..., { ...; }>


export function InventoryRegister({ data }: { data: ListInventoryRegisterAndMovementsByIDResponse }) {

  const tanForm = useAppForm(
    {
      defaultValues: {
        movements: data
      },
    }
  )

  return (
    <div className="flex flex-col space-y-4">
      <InventoryRegisterCard register={data.register} />
      <InventoryMovementTable movements={data.movements} form={tanForm} />
    </div>
  )
}


export const InventoryMovementTable = withForm({
  props: {
  },
  render: function Render({ form }) {...}
})
Was this page helpful?