feat: test Formik

martapanc · Sep 16, 2023 · 46ab677 · 46ab677
1 parent e682cad
commit 46ab677
Showing 1 changed file with 54 additions and 52 deletions.
diff --git a/src/components/molecules/ContactForm/ContactForm2.tsx b/src/components/molecules/ContactForm/ContactForm2.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useFormik } from 'formik';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
@@ -14,61 +14,63 @@ const validationSchema = Yup.object({
 });
 
 const ContactForm2 = () => {
-  const formik = useFormik({
-    initialValues: {
-      firstName: '',
-      lastName: '',
-      email: '',
-    },
-    validationSchema,
-    onSubmit: (values) => {
-      // eslint-disable-next-line no-console
-      console.log(JSON.stringify(values, null, 2));
-    },
-  });
   return (
-    <form onSubmit={formik.handleSubmit}>
-      <label htmlFor='firstName'>First Name</label>
-      <input
-        id='firstName'
-        name='firstName'
-        type='text'
-        onChange={formik.handleChange}
-        onBlur={formik.handleBlur}
-        value={formik.values.firstName}
-      />
-      {formik.touched.firstName && formik.errors.firstName ? (
-        <div>{formik.errors.firstName}</div>
-      ) : null}
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        email: '',
+        message: '',
+        color: '',
+      }}
+      validationSchema={validationSchema}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          // eslint-disable-next-line no-console
+          console.log(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      <Form>
+        <label htmlFor='firstName'>First Name</label>
+        <Field
+          name='firstName'
+          type='text'
+          className='form-input'
+          placeholder='Jane'
+        />
+        <ErrorMessage name='firstName' />
 
-      <label htmlFor='lastName'>Last Name</label>
-      <input
-        id='lastName'
-        name='lastName'
-        type='text'
-        onChange={formik.handleChange}
-        onBlur={formik.handleBlur}
-        value={formik.values.lastName}
-      />
-      {formik.touched.lastName && formik.errors.lastName ? (
-        <div>{formik.errors.lastName}</div>
-      ) : null}
+        <label htmlFor='lastName'>Last Name</label>
+        <Field
+          name='lastName'
+          type='text'
+          className='form-input'
+          placeholder='Doe'
+        />
+        <ErrorMessage name='lastName' />
 
-      <label htmlFor='email'>Email Address</label>
-      <input
-        id='email'
-        name='email'
-        type='email'
-        onChange={formik.handleChange}
-        onBlur={formik.handleBlur}
-        value={formik.values.email}
-      />
-      {formik.touched.email && formik.errors.email ? (
-        <div>{formik.errors.email}</div>
-      ) : null}
+        <label htmlFor='email'>Email Address</label>
+        <Field
+          name='email'
+          type='email'
+          className='form-input'
+          placeholder='example@mail.com'
+        />
+        <ErrorMessage name='email' />
 
-      <button type='submit'>Submit</button>
-    </form>
+        <Field name='message' as='textarea' className='form-textarea' />
+
+        <Field name='colors' as='select' className='select'>
+          <option value='red'>Red</option>
+          <option value='green'>Green</option>
+          <option value='blue'>Blue</option>
+        </Field>
+
+        <button type='submit'>Submit</button>
+      </Form>
+    </Formik>
   );
 };