easy way to wrap Field component as a child component?

[heecheon92]

Sometimes, there are cases where I would like to wrap form.Field component inside of a wrapper / HOC.

export default function TanstackFormPage() {
  const renderCount = useRenderCount();
  const [submittedFormValue, setSubmittedFormValue] = useState<object>({});
  const form = useForm<SampleForm>({
    defaultValues: {
      name: "",
      email: "",
      message: "",
    },
    onSubmit: ({ value }) => {
      setSubmittedFormValue(value);
    },
  });

  return (
    <div className="flex flex-col space-y-4 p-4 border-2 rounded-md">
      <header className="text-lg font-semibold">{`Tanstack Form (rendered ${renderCount} times)`}</header>

      <div className="flex flex-col space-y-2">
        <span>Submitted Form Object:</span>
        <pre>{JSON.stringify(submittedFormValue, null, 2)}</pre>
      </div>

      <form
        className="flex flex-col space-y-2"
        onSubmit={(e) => {
          e.preventDefault();
          form.handleSubmit();
        }}
      >
        <form.Field name="name">
          {(field) => (
            <div className="flex flex-row space-x-4">
              <input
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
              />
            </div>
          )}
        </form.Field>

        <form.Field name="email">
          {(field) => (
            <div className="flex flex-row space-x-4">
              <input
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
              />
            </div>
          )}
        </form.Field>

        <form.Field name="message">
          {(field) => (
            <div className="flex flex-row space-x-4">
              <input
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
              />
            </div>
          )}
        </form.Field>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

but in order to split form.Field component, I have to go through something like this,

type SampleForm = {
  name: string;
  email: string;
  message: string;
}

export default function TanstackFormPage() {
  const renderCount = useRenderCount();
  const [submittedFormValue, setSubmittedFormValue] = useState<object>({});
  const form = useForm({
    defaultValues: {
      name: "",
      email: "",
      message: "",
    },
    onSubmit: ({ value }) => {
      setSubmittedFormValue(value);
    },
  });

  return (
    <div className="flex flex-col space-y-4 p-4 border-2 rounded-md">
      <header className="text-lg font-semibold">{`Tanstack Form (rendered ${renderCount} times)`}</header>

      <div className="flex flex-col space-y-2">
        <span>Submitted Form Object:</span>
        <pre>{JSON.stringify(submittedFormValue, null, 2)}</pre>
      </div>

      <form
        className="flex flex-col space-y-2"
        onSubmit={(e) => {
          e.preventDefault();
          form.handleSubmit();
        }}
      >
        <ChildFormField<SampleForm>
          api={form}
          props={{
            name: "name",
          }}
        />

        <ChildFormField<SampleForm>
          api={form}
          props={{
            name: "email",
          }}
        />

        <ChildFormField<SampleForm>
          api={form}
          props={{
            name: "message",
          }}
        />

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

function ChildFormField<T>({
  api,
  props,
}: {
  api: ReactFormExtendedApi<T, undefined>;
  props: Omit<ComponentProps<typeof api.Field>, "children">;
}) {
  const renderCount = useRenderCount();
  return (
    <api.Field {...props}>
      {(field) => (
        <div className="flex flex-row space-x-4">
          <header>{`Child Form Field: ${props.name} (rendered ${renderCount} times)`}</header>
          <input
            value={field.state.value as string}
            onChange={(e) =>
              field.handleChange(
                e.target.value as Parameters<typeof field.handleChange>[0]
              )
            }
          />
        </div>
      )}
    </api.Field>
  );
}

Is there a easier workaround to split Field component into a part of other wrapper component?

[piotrpalek]

I'm surprised this isn't talked about anywhere (here or in the docs). The "UI integration" example is nice and all, but how do we abstract this so we don't have to repeat all of the code everywhere?

btw @heecheon92 nice job abstracting the Field component here