How Can I Pass Individual Array Item Using AppField and useFieldContext?

[ShoeBoom]

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/> would also work here but that feels like a hacky workaround since <ItemEdit/> should only hold the state of it's own item not the entire form.

export const {
  fieldContext,
  formContext,
  useFieldContext,
} = createFormHookContexts();


export const {
  useAppForm,
  withForm,
} = createFormHook({
  fieldComponents: {
    ItemEdit,
  },
  formComponents: {},
  fieldContext,
  formContext,
});



interface Props {
  users: Map<string, User>;
  onRemove: () => void;
}

export function ItemEdit({ users, onRemove }: Props) {
  const field = useFieldContext<Item>();

  console.log(field.state.value);

  return (...)
}

export const ItemsForm = withForm({
  defaultValues: {
    items: [],
  },
  render: function Render({ form, users }) {
    ...
  }
});

Inside the render function I have tried two things but neither give be the item object inside <ItemEdit/>:

<form.Field name="items" mode="array">
  {(field) =>
    field.state.value.map((_, i) => (
      <form.AppField name={`items[${i}]`} key={i}> {/* name={`items[${i}]`} is invalid  */}
        {(subField) => (
          <subField.ItemEdit
            users={users}
            onRemove={() => removeItem(i)}
          />
        )}
      </form.AppField>
    ))
  }
</form.Field>

<form.AppField name="items" mode="array">
  {(field) =>
    field.state.value.map((_, i) => (
      <field.ItemEdit {/* ItemEdit receives the whole array since the context from  AppField is an array */}
        users={users}
        onRemove={() => removeItem(i)}
      />
    ))
  }
</form.AppField>

another one I looked into is by making it item itself a subfield. but this still feels a little weird

  defaultValues: {
    items: [{item: {...}],
  },

[Escapado]

I have the exact same problem. A non-typesafe workaround until this is addressed would be to write:

name={`segments[${i}]` as any}

This way typescript won't complain and the code works as you would expect, the useFieldContext returns the field corresponding to that element.

EDIT
I profiled this and sadly there is one downside to this: If your ItemEdit component makes any changes to the array entry, say to items[0].title, then that entire corresponding <field.ItemEdit ... /> re-renders. In my use-case my dynamic array items are sub-forms (of different types) sometimes with dozens of fields. Performance-wise that's not really great.

If the use-case is unclear I am happy to create a stackblitz to show what I mean.

[juanvilladev]

This issue has been raised before in the discord but haven't really received any input on if array elements will ever be treated as fields themselves. Methods within the source code such as form.validate, form.getFieldValue actually work at runtime when doing:

form.getFieldValue(`Array${i}` as DeepKeys<TFormData>) // type casting gets rid of the typescript error.

Example:

form/packages/form-core/src/FormApi.ts

Lines 1952 to 1953 in ddbf5b7

	this.validateField(`${field}[${index1}]` as DeepKeys<TFormData>, 'change')
	this.validateField(`${field}[${index2}]` as DeepKeys<TFormData>, 'change')

I would highly suggest not doing this within your code since this is likely not supported on purpose.

Other libraries do support array elements as fields themselves, hopefully we can get some insight about this!