fascinating-indigo

Extracting the input element to make it reusable!

i this demo example everything works fine! But I need a way to extract out the input element into a separate component so that i don't need to write the input elelemnt again and again! But the problem becomes whever i tried to make a Field APi with general types the children prop of the form dont want to accept it! And normally i dont like using any it show a red mark (which is not that of a big deal) but something of personal preferrence!

import { useForm } from "@tanstack/react-form";
import ActionButton from "../../Common/Button/Button";

export default function LoginForm() {
  const form = useForm({
    defaultValues: {
      fullName: "Obaba",
      fine: true,
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value);
    },
  });

  return (
    <div>
      <form.Provider>
        <form
          className="text-black"
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            void form.handleSubmit();
          }}
        >
          <div>
            <form.Field name="fullName" children={(field) => <input name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />} />
            <form.Field name="fine" children={(field) => <input type="checkbox" name={field.name} checked={field.state.value} onChange={(e) => field.handleChange(e.target.checked)} />} />
          </div>
          <ActionButton text="Login" type="submit" />
        </form>
      </form.Provider>
    </div>
  );
}

import { useForm } from "@tanstack/react-form";
import ActionButton from "../../Common/Button/Button";

export default function LoginForm() {
  const form = useForm({
    defaultValues: {
      fullName: "Obaba",
      fine: true,
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value);
    },
  });

  return (
    <div>
      <form.Provider>
        <form
          className="text-black"
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            void form.handleSubmit();
          }}
        >
          <div>
            <form.Field name="fullName" children={(field) => <input name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />} />
            <form.Field name="fine" children={(field) => <input type="checkbox" name={field.name} checked={field.state.value} onChange={(e) => field.handleChange(e.target.checked)} />} />
          </div>
          <ActionButton text="Login" type="submit" />
        </form>
      </form.Provider>
    </div>
  );
}

6 Replies

other-emerald•2y ago

This is a usecase we need to support better and will have docs for. Right now it's kinda "you're on your own" and needing a lot of expertise in how the internals work

fascinating-indigoOP•2y ago

So it's something that is not available for now? I tried this

field: FieldApi<T, keyof T, undefined, undefined, T[keyof T]>;

field: FieldApi<T, keyof T, undefined, undefined, T[keyof T]>;

but seems like the library is generating a string manupulated object form the ParentData Type and if i pass a generics to it it can;t do that and field api class gets confused?? In that case i dont think having expertise in internal could also help ! Isn't it?

other-emerald•2y ago

You could, in theory, get everything working as-intended today. The issue you're running into is not a bug but seems to be a misunderstanding of how our internals work. (which is fair!) However, to get this working properly is a HUGE lift that we wouldn't have much time to help debug at the moment 😅 The overarching issue is that it's far too complex to build this behavior out on your own today and requires too much internals knowledge. We'll simplify this and document it more in the future

fascinating-indigoOP•2y ago

Haha! Unlucky me! But this thing should be a very common and hyped issue within the developers right now ! But seems like i am the only person who is concerned about the issue! Because most often if you make a product follwing a figma design pattern ! then almost every component maintains a consistency! For example i have x forms with n fields in my applications and all the n fields of x forms will have same ui and stylings! So according to u if i need to use this library for now as their is not documentation the only way for me is : ( Kindly copy paste your code each time for the sake of our library at present) . Because we are not considering the DRY principal right now for the library? (I mean you are considering it but it's a top secret and needs in depth knowledge of how library is built)

other-emerald•2y ago

:shrugging: This is the concequence of using non-stable software PRs welcome.

fascinating-indigoOP•2y ago

Oh ! Thats right too! Then I will wait for v1! Thanks a lot for your useful insights!

Gaming

Programming

Extracting the input element to make it reusable!

Did you find this page helpful?