Where does schema go when creating custom form component?

[nikitavoloboev]

I created custom component that looks like this:

import { createTsForm } from "@ts-react/form"
import { TextField } from "./TextField"
import { z } from "zod"

interface Props {
  children: JSX.Element
  onSubmit: () => void
}

// const FindOrderSchema = z.object({
//   email: z.string().email("Enter a real email please."),
//   orderNumber: z.string(),
// })

function Form({ children, onSubmit }: Props) {
  return (
    <form onSubmit={onSubmit}>
      {children}
      <button type="submit">submit</button>
    </form>
  )
}

const mapping = [[z.string(), TextField]] as const
export const FindOrderForm = createTsForm(mapping, { FormComponent: Form })

Read https://github.com/iway1/react-ts-form#customizing-form-components

However I am confused, where does schema go in this case?

I cannot do this:

[iway1]

it looks like "FindOrderSchema" is commented out.

The error message is saying that the variable doesn't exist. Gonna close this because I don't think it has to do with the package, but feel free to reopen with a repro if some other issue is happening.

Also - You'll only want to create one form per project (normally), the idea is that you only call createTsForm once and that component is able to render to all of your other components. (I will add more documentation to make this more clear for future users)