Ideal Form

gistfile1.txt

const Form = ({ onSubmit, formSchema, defaultValues, children }) => {
  const methods = useForm({ defaultValues, resolver: zodResolver(formSchema) });
  const { handleSubmit } = methods;

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {children}
      <input type="submit" />
    </form>
  );
};



export const HomePage = () => {
  const data = {
    userName: "Shannon",
    age: 40,
  }
  const onSubmit = (data) => {
    console.log(data);
  }
  
  const formSchema = {
    username: z.string().min(2, {
      message: "Username must be at least 2 characters.",
    }),
    age: z.number().min(18, {
      message: "You must be at least 18 years old.",
    }),
  }
   return (
    <>
      <Form onSubmit={onSubmit} formSchema={formSchema} defaultValues={data}>

      <FormField name="username">
        <FormLabel>User Name</FormLabel>
        <ShortText placeHolder="e.g ShannonSmith42" />
        <FormDescription>Enter the users name</FormDescription>
        <FormMessage/>
      </FormField>

      <FormField name="age">
        <FormLabel>Age</FormLabel>
        <Number placeHolder="eg. 3" />
        <FormDescription>Your age to the nearest year</FormDescription>
        <FormMessage/>
        </FormField>  
      </Form>
    </>
  )
};