Using generic types with Field component for array fields

[vonazt]

I'm trying to create a reusable component that will accept a Field prop and a generic data type. I'm able to achieve this with the type Field: FieldComponent<TParentData, ZodValidator>; but if I want the field to be an array I run into a type error when doing this:

<Field name={selector} mode="array">
      {field => (
        {field.state.value.map((_, i) => (
        ...

Property 'map' does not exist on type 'DeepValue<TParentData, unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple<TParentData> ? PrefixTupleAccessor<...> : TParentData extends any[] ? PrefixArrayAccessor<...> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor<...> : TParentData extends s...'.

Have I got something missing/wrong with my Field type?

[xvThomas]

Stuck like you, this only way I found is to use zod validation to coerce field.state.value :

<form.Field name={name} mode='array'>
        {(field) => {
          const schema = z.array(z.any())
          const validateArrayValue = schema.safeParse(field.state.value)
          if (!validateArrayValue.success) {
            console.error('Array expected for field.state.value')
            return null
          }
          const value = validateArrayValue.data
          return (
            <div className='flex flex-col gap-4'>
              {value.map((_, i: number) => (
                <React.Fragment key={`${name}[${i}]`}>{children(field, i)}</React.Fragment>
              ))}
            </div>
          )
        }}
</form.Field>