frail-apricot

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>

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

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.

12 Replies

frail-apricotOP•5mo ago

Is there a way to do something like that inside ArticleField which is already a field component registered in the form context?

<field.TextField />
<field.ArticleQuantityBySize />

<field.TextField />
<field.ArticleQuantityBySize />

xenial-black•5mo ago

so you want to group multiple fields into one component?

frail-apricotOP•5mo ago

No, quite the opposite of it. I want everything to be separated. But I'm failing to access the field components to manipulate the form state.

xenial-black•5mo ago

well, useFieldContext and useFormContext are context objects, so they can be nested. Of course that assumes that the nested component still has the same type for field context (or a wider one). When it comes to logic (setting other form state based on this field state), then that would belong in form.AppField, not your field component

frail-apricotOP•5mo ago

Does it mean I should have another nested form component instead of a field component? (my ArticleField to actually use useFormContext cuz I can't use something like <field.CustomComponent /> when using useFieldContext) e.g

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 (
    <>
      <field.TextField /> // already registered as a field component in the form context
      <field.ArticleQuantityBySize /> // can't access it this way - another custom field component
    </>
  )
}

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 (
    <>
      <field.TextField /> // already registered as a field component in the form context
      <field.ArticleQuantityBySize /> // can't access it this way - another custom field component
    </>
  )
}

Sorry if struggling to explain it or understand it properly

xenial-black•5mo ago

Remove the preceding field and import the component directly the field helps with autocomplete when you‘re using the form, it‘s unrelated to building the field components also keep in mind that the nested components also expect ClientApplicationItemFormValues as field type

frail-apricotOP•5mo ago

oh, so I can't narrow it down and focus only on the part of the form values which the component is responsible for?

export type ClientApplicationItemFormValues = {
  sku: string; // Like one component focus only here so the field context is type of string
  quantities_by_size: { // next one focuses only here so the type is { size: number; quantity: number }
    size: number;
    quantity: number;
  }[];
  ...
};

export type ClientApplicationItemFormValues = {
  sku: string; // Like one component focus only here so the field context is type of string
  quantities_by_size: { // next one focuses only here so the type is { size: number; quantity: number }
    size: number;
    quantity: number;
  }[];
  ...
};

Also, I need to map through the quantitiesBySize

{quantitiesBySize.map((quantity) => (
        <ArticleQuantityBySize
          size={quantity.size}
          quantity={quantity.quantity}
          key={quantity.size}
        />
      ))}

{quantitiesBySize.map((quantity) => (
        <ArticleQuantityBySize
          size={quantity.size}
          quantity={quantity.quantity}
          key={quantity.size}
        />
      ))}

so we do it like that? Not using the AppField with mode array?

xenial-black•5mo ago

That would be what this question was referring to at the moment, it's not possible. But there is a PR version if you'd like to give it a spin

frail-apricotOP•5mo ago

oh, okaay. Thank you. Can I have a look at PR? I guess I need some stable solution. What can I do for now, while it's not possible? Should I just not split into components too much)

xenial-black•5mo ago

either a compound field (one field at object level, inputs change the property of the object), or splitting it into multiple field components PR: https://github.com/TanStack/form/pull/1469 (includes docs description) To use it:

npm i https://pkg.pr.new/@tanstack/react-form@1469

npm i https://pkg.pr.new/@tanstack/react-form@1469

frail-apricotOP•5mo ago

thank you, just tried modifying the object properties In case of arrays, this is the only thing I could do, right? (Checking the field I want to modify by index or size in my case, also keeping the previous state in the handleChange)

export default function ArticleQuantityBySize({ size, quantity }: Props) {
  const field = useFieldContext<ClientApplicationItemFormValues>();

  return (
    <div className="p-1 flex flex-col items-center space-y-2">
      <p className="text-muted-foreground">{size}</p>

      <Input
        defaultValue={quantity}
        type="number"
        inputSize="sm"
        onChange={(e) =>
          field.handleChange({
            ...field.state.value,
            quantities_by_size: field.state.value.quantities_by_size.map(
              (q) => ({
                ...q,
                quantity: q.size === size ? e.target.valueAsNumber : q.quantity,
              })
            ),
          })
        }
        className="min-w-16 max-w-[80px] text-center"
      />
    </div>
  );
}

export default function ArticleQuantityBySize({ size, quantity }: Props) {
  const field = useFieldContext<ClientApplicationItemFormValues>();

  return (
    <div className="p-1 flex flex-col items-center space-y-2">
      <p className="text-muted-foreground">{size}</p>

      <Input
        defaultValue={quantity}
        type="number"
        inputSize="sm"
        onChange={(e) =>
          field.handleChange({
            ...field.state.value,
            quantities_by_size: field.state.value.quantities_by_size.map(
              (q) => ({
                ...q,
                quantity: q.size === size ? e.target.valueAsNumber : q.quantity,
              })
            ),
          })
        }
        className="min-w-16 max-w-[80px] text-center"
      />
    </div>
  );
}

xenial-black•5mo ago

consider passing the index as prop so you don't need to refind it on every change

Gaming

Programming

Use app field components inside another field component

Did you find this page helpful?