The component has no errors, but in the index file where I actually call the input component, it has an error because it cannot use register = {register}.
What is missing? Or what's wrong?
-
I found an article that helped me find the solution. Codebox has the right solution for those who want to use typescript componentization using React Hook Form.Cadu– Cadu2020-08-13 15:01:03 +00:00Commented Aug 13, 2020 at 15:01
Add a comment
|
3 Answers
OK here the problems:
- you need to add
registerto props in the Input component props declaration - you must use the
registerpassed as prop, not a new one created withuseFormin Input component - the input element is missing the name attribute
here the working <Input> component with comments:
import React, { InputHTMLAttributes } from "react";
import {
FieldValues,
UseFormRegister,
// useForm, // don't need this import
} from "react-hook-form";
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
id: string;
label: string;
register: UseFormRegister<FieldValues>; // declare register props
}
const Input: React.FC<InputProps> = ({ id, label, register, ...rest }) => {
//const { register } = useForm(); // don't use a new `register`, use the one from props
return (
<div className="input-block">
<label htmlFor={id}>{label}</label>
<br />
<br />
{/* react-hook-form v6 */}
{/* you must declare the `name` attribute on the input element */}
<input name={id} type="text" id={id} ref={register} {...rest} />
{/* react-hook-form v7 */}
{/* In v7 the register() function returns all the needed properties */}
{/* see: https://dev.to/bluebill1049/what-s-coming-in-react-hook-form-version-7-4bfa */}
{/* <input type="text" id={id} {...register(id)} {...rest} /> */}
</div>
);
};
export default Input;
6 Comments
Nick Tiberi
FYI, the
register prop is actually of type UseFormRegister<FieldValues>.
thiras
register: UseFormRegister<FieldValues>; this is the expected type. You can import them as import { FieldValues, UseFormRegister } from "react-hook-form";
Hem
any solution for react-hook-for v7 ?
Luca Faggianelli
Apparently you just need to replace the
ref={register} with {...register(id)} (and remove the name property) as in v7 register('name') provides all the needed props for the input element, see this post about v7 changes: dev.to/bluebill1049/…Luiz Henrique Guerra
not working form me, I get this error
Type 'FieldValues' is missing the following properties from type and then it lists all my form fields |
I found an article that helped me find the solution.
Codebox has the right solution for those who want to use typescript componentization using React Hook Form.
Comments
In this case register prop should be something that extends FieldValues not be a FieldValues
There is a complete example at https://stackoverflow.com/a/77636341/1633344
