T
TanStackā€¢2mo ago
eastern-cyan

Splitting form between components

Hi! I doing something like this: 
export function ContentItemDetails({ id }: { id: string }) {
  const form = useAppForm({
    defaultValues: {
      translations: {},
      locale: i18n.defaultLocale,
    } as FormData,
  });

  return (
    <Card
      className="flex-1"
      captionSize={"sm"}
      caption={
        <span className="flex items-center gap-5">
          <span>Details</span>

          <form.AppField name="locale">
            {(field) => <field.LocaleSwitchField />}
          </form.AppField>
        </span>
      }
    >
      <Suspense fallback={<div>Loading...</div>}>
        <ContentItemDetailsContent id={id} />
      </Suspense>
    </Card>
  );
}

function ContentItemDetailsContent({ id }: { id: string }) {
  const contentItemQO = getContentQueryOptions(id);

  const { data } = useSuspenseQuery(contentItemQO);

  const form = useFormContext(); // ? 
  return <form>
    
  </form>;
}
export function ContentItemDetails({ id }: { id: string }) {
  const form = useAppForm({
    defaultValues: {
      translations: {},
      locale: i18n.defaultLocale,
    } as FormData,
  });

  return (
    <Card
      className="flex-1"
      captionSize={"sm"}
      caption={
        <span className="flex items-center gap-5">
          <span>Details</span>

          <form.AppField name="locale">
            {(field) => <field.LocaleSwitchField />}
          </form.AppField>
        </span>
      }
    >
      <Suspense fallback={<div>Loading...</div>}>
        <ContentItemDetailsContent id={id} />
      </Suspense>
    </Card>
  );
}

function ContentItemDetailsContent({ id }: { id: string }) {
  const contentItemQO = getContentQueryOptions(id);

  const { data } = useSuspenseQuery(contentItemQO);

  const form = useFormContext(); // ? 
  return <form>
    
  </form>;
}
ā€“ spliting a from between parent and child component. How that could be done? How I could access the form that I defined in the parent conponent?
1 Reply
eastern-cyan
eastern-cyanOPā€¢2mo ago
Nevermind, I just found the withForm documentation, that's what I need I think. šŸ˜…

Did you find this page helpful?