Install react-hook-form

package.json

@@ -16,6 +16,7 @@
     "eslint-config-airbnb-typescript": "^12.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^6.15.5",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2"

src/components/AuthUser/SignInForm/SignInForm.tsx

-import React, { useState } from 'react';
+import React, { FC } from 'react';
+import { useForm } from 'react-hook-form';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
-import { isEmailValid } from './emailValidator';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -21,30 +22,29 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export const SignInForm: React.FC = () => {
-  interface formData {
+export const SignInForm: FC = () => {
+  type FormData = {
     email: string;
     password: string;
-    errors: Array<string>;
-  }
+  };
 
-  const defaultValues: formData = {
+  const defaultValues: FormData = {
     email: '',
     password: '',
-    errors: [],
   };
-  const [formValues, setFormValues] = useState<formData>(defaultValues);
 
-  const handleSubmit = (event: React.FormEvent): void => {
-    event.preventDefault();
-    const errors: Array<string> = [];
-    if (!isEmailValid(formValues.email)) errors.push('email');
-  };
+  const { register, errors, handleSubmit, getValues } = useForm({
+    defaultValues,
+  });
+
+  const onSubmit = handleSubmit((values: FormData) => {
+    // Send data
+  });
 
   const classes = useStyles();
 
   return (
-    <form className={classes.form} onSubmit={handleSubmit} data-testid="Form">
+    <form className={classes.form} onSubmit={onSubmit} data-testid="Form">
       <TextField
         variant="outlined"
         margin="normal"
@@ -55,10 +55,14 @@ export const SignInForm: React.FC = () => {
         name="email"
         autoComplete="email"
         autoFocus
-        onChange={(event) =>
-          setFormValues({ ...formValues, email: String(event.target.value) })
-        }
+        inputRef={register({
+          required: 'Required',
+          validate: {
+            emailEqual: (value) => value === getValues().email || 'Error',
+          },
+        })}
       />
+      {errors.email && errors.email.message}
       <TextField
         variant="outlined"
         margin="normal"
@@ -69,10 +73,13 @@ export const SignInForm: React.FC = () => {
         type="password"
         id="password"
         autoComplete="current-password"
-        onChange={(event) =>
-          setFormValues({ ...formValues, password: String(event.target.value) })
-        }
+        inputRef={register({
+          required: 'Required',
+          min: 8,
+          max: 60,
+        })}
       />
+
       <Button
         type="submit"
         fullWidth

yarn.lock

@@ -15135,6 +15135,11 @@ react-helmet-async@^1.0.4:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
+react-hook-form@^6.15.5:
+  version "6.15.5"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.5.tgz#c2578f9ce6a6df7b33015587d40cd880dc13e2db"
+  integrity sha512-so2jEPYKdVk1olMo+HQ9D9n1hVzaPPFO4wsjgSeZ964R7q7CHsYRbVF0PGBi83FcycA5482WHflasdwLIUVENg==
+
 react-hot-loader@^4.12.21:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202"