CODEWITHSUNDEEP
react-hook-formreact-adminreact-tsx
Paulo-99
Paulo-99

Reputation: 35

Using useFormState in a react-admin Form seems broken

I try using the hook useFormState from react-hook-form in a react-admin form I am a beginner for both modules so maybe I use them wrong but I searched through both of the documentations and I could not find something saying I was having a wrong use.

Here is my code

import { useFormState } from 'react-hook-form';
import {
  Create,
  Form,
  TextInput,
} from 'react-admin';

const MyCustomComponent = () => {
  const { errors, isDirty } = useFormState();

  return (
    <div>
      <h3>State</h3>
      <pre>{JSON.stringify({ errors, isDirty }, null, 2)}</pre>
    </div>
  );
};

export const CreateComponent = () => (
  <Create>
    <Form>
      <TextInput source="title" />
      <TextInput source="description" />
      <MyCustomComponent />
    </Form>
  </Create>
);

I don't understand why but I keep getting the error Cannot read properties of null (reading 'control') I read for other subjects that it meant my hook call wasn't in a FormProvider but it seems pretty obvious that my custom component is inside a FormProvider

If I add those lines inside my component:

const context = useFormContext();
console.log(context);

context is null

I really don't understand and can't make it work Please could you tell me if I am forgetting something ? Should I add default values since I am using typescript ?

Upvotes: 1

Views: 22

Answers (1)

slax57
slax57

Reputation: 593

This issue could be due to having duplicate versions of react-hook-form (one direct dependency in your project and one brought by react-admin).

You can run npm list react-hook-form to check if you have duplicate versions.

Alternatively you can check your lockfile (package-lock.json or yarn.lock depending on your package manager).

To dedupe the package you can run npm dedupe react-hook-form or yarn dedupe react-hook-form.

Or, edit the lockfile manually.

Or, use yarn’s resolutions or npm’s overrides:

// in packages.json
{
  // ...
  "resolutions": {
    "react-hook-form": "7.54.2"
  }
}

Upvotes: 0

Related Questions