The `useController` example code has an error and differs between JavaScript and TypeScript

[nspaeth]

Version Number

latest website

Codesandbox/Expo snack

none

Steps to reproduce

1. Go to the useController documentation.
2. Observe that line 7 is defining name as a const, even though name is already defined in this scope.
3. Click TS to see the Typescript version. Observe that the TypeScript version of the code is a completely different example, when typically it would be the same example but with typescript annotations added.

Expected behaviour

1. name would not be re-defined as a const in a scope where it is already defined.
2. The TS example would correspond directly to the JS example

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Edge

Relevant log output

As an aside: The bug report template does not accommodate documentation bugs well.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[bluebill1049]

thanks for report, what's the issue in there, we don't keep codesandbox 100% the same, but the code should be repesetnt the usage.

[bluebill1049]

Click TS to see the Typescript version. Observe that the TypeScript version of the code is a completely different example, when typically it would be the same example but with typescript annotations added.

can you past the code for for more detail?

[nspaeth]

JS:

import React from "react";
import { TextField } from "@material-ui/core";
import { useController, useForm } from "react-hook-form";

function Input({ control, name }) {
  const {
    field: { onChange, onBlur, name, value, ref },
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: "",
  });

  return (
    <TextField 
      onChange={onChange} // send value to hook form 
      onBlur={onBlur} // notify when input is touched/blur
      value={value} // input value
      name={name} // send down the input name
      inputRef={ref} // send input ref, so we can focus on input when error appear
    />
  );
}

function App() {
  const { control } = useForm();
  
  return <Input name="firstName" control={control} />;
}

TS:

import * as React from "react";
import { useForm, useController, UseControllerProps } from "react-hook-form";

type FormValues = {
  FirstName: string;
};

function Input(props: UseControllerProps<FormValues>) {
  const { field, fieldState } = useController(props);

  return (
    <div>
      <input {...field} placeholder={props.name} />
      <p>{fieldState.isTouched && "Touched"}</p>
      <p>{fieldState.isDirty && "Dirty"}</p>
      <p>{fieldState.invalid ? "invalid" : "valid"}</p>
    </div>
  );
}

export default function App() {
  const { handleSubmit, control } = useForm<FormValues>({
    defaultValues: {
      FirstName: ""
    },
    mode: "onChange"
  });
  const onSubmit = (data: FormValues) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input control={control} name="FirstName" rules={{ required: true }} />
      <input type="submit" />
    </form>
  );
}

These are completely different examples. Typically when showing a TS example alongside a JS example you use the same example. Doing it that way makes it so you have fewer examples to maintain: You only have to create a TS example, and the JS example is auto-generated by stripping the TS type annotations.