useFormReturnType usage

[austere echo]

Hi All,

I’m trying to pass form as prop to another component but I’m having difficulty using useformreturntype - example in Docs is in Typescript but I’m using pure react in my project. I would like to be able to use getInputProps in the component. I would appreciate any help. Thanks

[rapid breach]

If you do not use TypeScript, then simply remove all types

[austere echo]

Thanks. Still not sure how to pass in UseFormRerturnType to component. Could you help? Thank you!```import { TextInput } from '@mantine/core';
import { useForm, UseFormReturnType } from '@mantine/form';

function NameInput({ form: UseFormReturnType }) {
return <TextInput {...form.getInputProps('name')} />;
}
function Demo() {
const form = useForm({ initialValues: { name: '', occupation: '' } });
return (
<NameInput form={form} />
);
}```

[rocky turtle]

UseFormReturnType is a type. If your files are javascript (*.js) you do not ever need it. You should be able to copy paste this first example without changing anything since it doesn't use any types. https://mantine.dev/form/use-form/#usage

If you do use typescript, you do not need to explicitly specify the types in this case because TS is a structural type system.

[austere echo]

Thanks. I have create CodeSandbox example to illustrate my issue. When passing form to component form fields are not editable if Im trying to getinputProps.https://codesandbox.io/s/optimistic-fermat-um1nbk?file=/src/App.js

[rocky turtle]

Two things

1. you do not need to manually provide value={form.values.*} or checked=... on the inputs because {...form.getInputProps()} does that already.
2. The fix for fields not being editable was to move the FormBody component definition to be outside the other App component definition. You should never nest definitions of components like that otherwise you'll get issues with closures (at least I think that is what the issue was).

const FormBody = (props) => {...} // This is good
export default function App() {
  const FormBody = (props) => {...} // This is bad
  return <div />
}