TanStackT
TanStack•10mo ago•
1 reply
moderate-tomato

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).

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>


However I get a type on "name" saying that 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?
image.png
Was this page helpful?