Cannot find name 'FieldValues'

React
1

Hi everyone…

I’m having a this problem with “React hook library” type called “FieldValues”.
When i {handleSubmit()} data from within <form> it shows no errors.

Please note that “data” has type of “FieldValues”

download
download704×890 94.9 KB

but when i store this logic in separate function “onSubmit” it throws error for the type, even though it has type of “FieldValues”.

Please let me know if i made some error. Thank you. Here is the code:

import { useForm } from "react-hook-form";

function Form() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data: FieldValues) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="mb-3">
        <label htmlFor="name" className="form-label">
          Your Name
        </label>
        <input
          {...register("name")}
          id="name"
          type="text"
          className="form-control"
        />
      </div>
      <div className="mb-3">
        <label htmlFor="age" className="form-label">
          Your Age
        </label>
        <input
          {...register("age")}
          id="age"
          type="number"
          className="form-control"
        />
      </div>
      <button className="btn btn-primary" type="submit">
        Submit
      </button>
    </form>
  );
}

export default Form;
2

Need to import FieldValues from react hook form

import { FieldValues, useForm } from 'react-hook-form';

My notes from this lesson are telling me that FieldValues is the default if we don’t pass a generic type to useForm() like useForm<Person>() but in either case Typescript won’t be able to find it if we don’t import it or declare it in the file where we are using it.

2 Likes