TanStackT
TanStack•7mo ago•
16 replies
uncertain-scarlet

Use app field components inside another field component

Hi there. I'm stuck in form composition.
I'm building a form where I definitely need form composition - it's where I'm struggling.

Here, a component with withForm

     <form.AppField name="items" mode="array">
        {(field) => (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {field.state.value.map((item, index) => (
              <form.AppField name={`items[${index}]`}>
                {(field) => <field.ArticleField key={index} />}
              </form.AppField>
            ))}

            <field.AddArticleButton />
          </div>
        )}
      </form.AppField>

Now, when it comes to my ArticleField, I want to still access the other field components so I can add inputs there. 

export default function ArticleField() {
  const field = useFieldContext<ClientApplicationItemFormValues>();

  const sku = useStore(field.store, (state) => state.value.sku);

  const quantitiesBySize = useStore(
    field.store,
    (state) => state.value.quantities_by_size
  );

  return (...)
}


I want to create an input for my sku field, also will need to add another array field for quantitiesBySize, splitted into another component. I have no idea how to achieve that.
Was this page helpful?