Right way of using react-hook-form with typescript and material-ui for showing error message

Question

I am using react-hook-form with typescript and material-ui. I wanted to pass error message as a helperText to TextField. I have tried to do so using helperText={errors.email?.message} but typescript complains about this assignment.

Property 'email' does not exist on type 'NestDataObject<FormData>'.ts(2339)

I don't want to disable this rule from my .eslintrc file, because it may ignore other similar issues in my application, which may be desired at some places. What is the right way of assigning error message of react-hook-form as a helperText to material-ui components?

codesandbox link https://codesandbox.io/s/material-ui-react-form-hook-yi669

Thats right, but what's the appropriate way of defining it? FormData coming from react-hook-form package. — Mahesh
– Mahesh, Commented Mar 14, 2020 at 2:43
Oh. Thanks @HunterMcMillen for hint. It's working now. Posting an answer. — Mahesh
– Mahesh, Commented Mar 14, 2020 at 2:47
No you defined it on line 5 of app.tsx: type FormData = { firstName: string; lastName: string; }; — Hunter McMillen
– Hunter McMillen, Commented Mar 14, 2020 at 2:47
Yes. updated my own sandbox, but then reverted and forked another one for answer. Thanks for help @HunterMcMillen. — Mahesh
– Mahesh, Commented Mar 14, 2020 at 2:53

Mahesh · Accepted Answer · 2020-03-14 02:52:18Z

4

Need to define a datatype for form data and pass it to 'useForm'.

type FormData = {
  email: string;
  password: string;
};

const { control, handleSubmit, errors } = useForm<FormData>();

Updated sandbox : https://codesandbox.io/s/material-ui-react-form-hook-answer-8cxc1

answered Mar 14, 2020 at 2:52

Mahesh

1,6354 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CodeMemory Over a year ago

Thank you sir, after several hours without a solution, this works perfectly!

npkp Over a year ago

Hi @Mahesh, I used the above code but the error I get is " Property 'errors' does not exist on type 'UseFormReturn<FormData>'.ts(2339) "

Collectives™ on Stack Overflow

Right way of using react-hook-form with typescript and material-ui for showing error message

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related