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

1
votes

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

1
reactjstypescriptmaterial-uireact-hook-form
You don't have email defined in your FormData type. – Hunter McMillen
Thats right, but what's the appropriate way of defining it? FormData coming from react-hook-form package. – Mahesh
Oh. Thanks @HunterMcMillen for hint. It's working now. Posting an answer. – Mahesh
No you defined it on line 5 of app.tsx: type FormData = { firstName: string; lastName: string; }; – Hunter McMillen
Yes. updated my own sandbox, but then reverted and forked another one for answer. Thanks for help @HunterMcMillen. – Mahesh

1 Answers

3
votes

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