mode="array" with appField in dynamic array

Hey, I have a bit of a complicated usecase I think. I have a dynamic form in which a user can add different segments to it (these segments or subforms can vary based on what the user selects).

I build an AppField component for this segment and added it to my createFormHook under the fieldComponents (Let's call it

ExamSegmentField

ExamSegmentField

).

In my main form I now want to show all the segments the user has added like so:

<form {...}>
// Other form components
  <form.Field name="segments" mode="array">
    {(field) =>
      field.state.value?.map((S, i) => (
        <form.AppField
          index={i}
          name={`segments[${i}]`}
          children={(field) => <field.ExamSegmentField index={i} />}
        />
      ))
    }
  </form.Field>
  <form.AppForm>
    <form.SubmitButton>Submit</form.SubmitButton>
  </form.AppForm>
</form>

<form {...}>
// Other form components
  <form.Field name="segments" mode="array">
    {(field) =>
      field.state.value?.map((S, i) => (
        <form.AppField
          index={i}
          name={`segments[${i}]`}
          children={(field) => <field.ExamSegmentField index={i} />}
        />
      ))
    }
  </form.Field>
  <form.AppForm>
    <form.SubmitButton>Submit</form.SubmitButton>
  </form.AppForm>
</form>

However I get a type on "name" saying that

type 'segment[number]' is not assignable to type {...}

type 'segment[number]' is not assignable to type {...}

where

{...}

{...}

is my form schema (which obviously contains segments and I can even see the sub-fields in the error message).

Am I structuring this incorrectly?

TanStack•13mo ago•

1 reply

moderate-tomato

mode="array" with appField in dynamic array

ExamSegmentField

ExamSegmentField

).

In my main form I now want to show all the segments the user has added like so:

<form {...}>
// Other form components
  <form.Field name="segments" mode="array">
    {(field) =>
      field.state.value?.map((S, i) => (
        <form.AppField
          index={i}
          name={`segments[${i}]`}
          children={(field) => <field.ExamSegmentField index={i} />}
        />
      ))
    }
  </form.Field>
  <form.AppForm>
    <form.SubmitButton>Submit</form.SubmitButton>
  </form.AppForm>
</form>

<form {...}>
// Other form components
  <form.Field name="segments" mode="array">
    {(field) =>
      field.state.value?.map((S, i) => (
        <form.AppField
          index={i}
          name={`segments[${i}]`}
          children={(field) => <field.ExamSegmentField index={i} />}
        />
      ))
    }
  </form.Field>
  <form.AppForm>
    <form.SubmitButton>Submit</form.SubmitButton>
  </form.AppForm>
</form>

However I get a type on "name" saying that

type 'segment[number]' is not assignable to type {...}

type 'segment[number]' is not assignable to type {...}

where

{...}

{...}

is my form schema (which obviously contains segments and I can even see the sub-fields in the error message).

Am I structuring this incorrectly?

mode="array" with appField in dynamic array

mode="array" with appField in dynamic array

Similar Threads