import {Form, useFormContext} from "mantine-form-context"

function Nested() {
  const [f, _] = useFormContext<MyFormValues>()
  // f is same value as useForm returns
  // _ is a proxy object that gives access to all property paths (also nested objects and array paths can be resolved)
  return (
    <TextInput
      label="Name"
      placeholder="Name"
      {...f.getInputProps(_.name._PATH_)}
    />
  )
}

function Example() {
  return (
    // wraps a useForm in a context
    <Form<MyFormValues>
      initialValues={{ name: "John Doe" }}
      onSubmit={values => {
        console.log("submitting", values)
      }}
    >
      {(f, _) => (
        <>
          <TextInput
            label="Name"
            placeholder="Name"
            {...f.getInputProps(_.name._PATH_)}
          />
          <Nested />
        </>
      )}
    </Form>
  )
}