React TS: Don't repeat the type when you pass functions as props, use their types.
Tags: react, typescript, webdev, beginners
Published: 2022-08-19 03:08:00

> Don't repeat the type when you pass functions as props, use their types.

Let's suppose, there is a component named 'SignUpForm'.

```typescript
export interface SignUpFormProps {
  onSubmit?: (values: {
    username: string;
    nickname: string;
    password: string;
  }) => void;
}

export const SignUpForm = ({ onSubmit }: SignUpFormProps) => {
  const [values, setValues] = useState({
    username: "",
    nickname: "",
    password: "",
  });

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setValues((prevValues) => ({
      ...prevValues,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit: React.FormEventHandler = (e) => {
    e.preventDefault();
    onSubmit?.(values);
  };

  return (
    <form
      onSubmit={handleSubmit}
      style={{ display: "flex", flexDirection: "column" }}
    >
      <input
        type="text"
        name="username"
        value={values.username}
        onChange={handleChange}
      />
      <input
        type="text"
        name="nickname"
        value={values.nickname}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
};
```

The submit event passes the arguments 'username', 'nickname' and 'password' to the `onSubmit` prop if it is there.

You can pass the function like below.

```typescript
function App() {
  const handleSubmit = (
    values
  ) => {
    console.log(values);
  };

  return (
    <div>
      <SignUpForm onSubmit={handleSubmit} />
    </div>
  );
}
```

If you don't have an option `"noImplicitAny": false`, it occurs an error. 

![any_type_error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgag3m0q9huikkv42phk.png)


For avoiding this problem, you can repeat the type of the `onSubmit`.

![repeat_type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d0b2iq2md12cr26wpb1.png)
 
If you just repeated like this, you'll have to keep up-to-date depending on the `onSubmit` prop.

It would bother you.
In this case, you can get the field type of the interface using brackets.

![field_type_of_interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfh1q6h4jb8ddbhgt6fo.png)

```typescript

function App() {
  const handleSubmit:SignUpFormProps['onSubmit'] = (
    values
  ) => {
    console.log(values);
  };

  return (
    <div>
      <SignUpForm onSubmit={handleSubmit} />
    </div>
  );
}
```

If there is no interface, use `React.ComponentProps`.

![get the field type using react component props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g737qeegznw7pn6p6r4f.png)
 

```typescript
function App() {
  const handleSubmit: React.ComponentProps<typeof SignUpForm>["onSubmit"] = (
    values
  ) => {
    console.log(values);
  };

  return (
    <div>
      <SignUpForm onSubmit={handleSubmit} />
    </div>
  );
}
```


---

That's it. I hope it will be helpful for someone.

Happy Coding!

---

+
Thanks for reading it, all you guys. I'm not sure if that was an appropriate example though. The point was that you can get the field type, and you can use it with other packages. Thank you for your attention again, Good coding!