src/components/FormInput/FormInput.tsx

@@ -14,7 +14,16 @@ const FormInput = () => {
       instagram: "",
     },
     validationSchema: Yup.object({
-      nome: Yup.string().label("Seu nome completo").required(),
+      nome: Yup.string()
+        .required()
+        .test(
+          "is-full-name",
+          "Please enter both your first and last name",
+          function (value: any) {
+            const nameArr = value.split(" ");
+            return nameArr.length >= 2;
+          }
+        ),
       email: Yup.string().email().required(),
       cpf: Yup.string().required(),
       nascimento: Yup.string().required(),
@@ -35,54 +44,66 @@ const FormInput = () => {
           <li className={styles["form-item"]}>
             <label>Nome</label>
             <input
+              id="nome"
               type="text"
               placeholder="Seu nome completo"
               value={formik.values.nome}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>E-mail</label>
             <input
+              id="email"
               type="text"
               placeholder="Seu email"
               value={formik.values.email}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>CPF</label>
             <input
+              id="cpf"
               type="text"
               placeholder="000.000.000-00"
               value={formik.values.cpf}
+              onChange={formik.handleChange}
             />
           </li>
 
           <li className={styles["form-item"]}>
             <label>Data de Nascimento</label>
             <input
+              id="nascimento"
               type="text"
               placeholder="00.00.00"
               value={formik.values.nascimento}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>Telefone</label>
             <input
+              id="tel"
               type="text"
               placeholder="(00)00000-0000"
               value={formik.values.tel}
+              onChange={formik.handleChange}
             />
           </li>
           <li className={styles["form-item"]}>
             <label>Instagram</label>
             <input
+              id="instagram"
               type="text"
               placeholder="@seuuser"
               value={formik.values.instagram}
+              onChange={formik.handleChange}
             />
           </li>
         </ul>
-        <button>Cadastre-se</button>
+        <button type="submit">Cadastre-se</button>
       </form>
     </div>
   );

src/pages/Home.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { NavigationBar } from "../components/NavigationBar/NavigationBar";
+import { FormInput } from "../components/FormInput/FormInput";
 
 const Home = () => {
   //const style = { background: "black" };
   return (
     <div /*style={style}*/>
-      <NavigationBar></NavigationBar>
+      <FormInput></FormInput>
     </div>
   );
 };