T
TanStack•6mo ago
ratty-blush

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>
<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?
No description
1 Reply
ratty-blush
ratty-blushOP•6mo ago
For reference, there is a discussion on github about this, which I found after posting this. Technically the code works, but sadly it triggers re-renders of the entire component, even if just a field within an array entry changes. So for example if one entry in the array looks like this: {title: "Test", points: 0} and I make a change to the title, then it triggers a full re-render of the entire component. https://github.com/TanStack/form/discussions/1322
GitHub
How Can I Pass Individual Array Item Using AppField and `useField...
Hi I am trying to show a list of <ItemEdit/> components for each item in an array. But I am only able to pass the entire array or only pass subfields. I understand <field.AppForm/> woul...

Did you find this page helpful?