CODEWITHSUNDEEP
reactjstypescriptmaterial-uireact-hook-form
Mahesh
Mahesh

Reputation: 1635

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

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

Upvotes: 7

Views: 7915

Answers (1)

Mahesh
Mahesh

Reputation: 1635

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

Upvotes: 4

Related Questions