From 047f13f6912fc878313793a4cb6c286c93f8b3b5 Mon Sep 17 00:00:00 2001
From: Polash Ahmed <134755739+polash99y@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:20:41 +0600
Subject: [PATCH 1/2] Create formik.jsx

formik
---
 src/components/FORM/formik.jsx | 64 ++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/FORM/formik.jsx

diff --git a/src/components/FORM/formik.jsx b/src/components/FORM/formik.jsx
new file mode 100644
index 0000000..b689f6d
--- /dev/null
+++ b/src/components/FORM/formik.jsx
@@ -0,0 +1,64 @@
+
+import React from 'react'
+
+
+// import * as yup from 'yup';
+import { useFormik } from "formik";
+
+
+export default function Signup() {
+
+  const formik = useFormik({
+    initialValues :{
+      name : '',
+      email : '',
+      password : ''
+    },
+    onSubmit : (values,{resetForm})=>{
+      console.log(values);
+      resetForm({values: ""})
+    }
+  })
+
+
+    return (
+        <div>
+            <h1>User Signup</h1>
+            <form onSubmit={formik.handleSubmit}>
+                <div>
+                    <label htmlFor='name'>Name : </label>
+                    <input
+                        onChange={formik.handleChange}
+                        value={formik.values.name}
+                        type="text"
+                        name="name"
+                        id="name"
+                        required />
+                </div>
+                <div>
+                    <label htmlFor='email'>Email : </label>
+                    <input
+                        onChange={formik.handleChange}
+                        value={formik.values.email}
+                        type="email"
+                        name="email"
+                        id="email"
+                        required />
+                </div>
+                <div>
+                    <label htmlFor='password'>Password : </label>
+                    <input
+                        onChange={formik.handleChange}
+                        value={formik.values.password}
+                        type="password"
+                        name="password"
+                        id="password"
+                        required />
+                </div>
+                <button type="submit">Signup</button>
+            </form>
+
+           
+        </div>
+    )
+}

From 030821d34c1174d004d2630e5f4a40cf4410db7a Mon Sep 17 00:00:00 2001
From: Polash Ahmed <134755739+polash99y@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:55:48 +0600
Subject: [PATCH 2/2] Create yupFormik.jsx

yupFormik
---
 src/components/FORM/yupFormik.jsx | 77 +++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/components/FORM/yupFormik.jsx

diff --git a/src/components/FORM/yupFormik.jsx b/src/components/FORM/yupFormik.jsx
new file mode 100644
index 0000000..2001312
--- /dev/null
+++ b/src/components/FORM/yupFormik.jsx
@@ -0,0 +1,77 @@
+
+import React from 'react'
+
+
+import * as yup from 'yup';
+import { useFormik } from "formik";
+
+
+export default function Signup() {
+
+  const formik = useFormik({
+    initialValues :{
+      name : '',
+      email : '',
+      password : ''
+    },
+    validationSchema: yup.object({
+      name: yup.string().min(2, "name must have atleast 2 characters ").required(),
+      email: yup.string().email().required(),
+      password: yup.string().min(6,  "password must have atleast 6 characters ").required(),
+    }),
+    onSubmit : (values,{resetForm})=>{
+      console.log(values);
+      resetForm({values: ""})
+    }
+  })
+
+  const renderNameError = formik.touched.name && formik.errors.name &&  <span style={{color:"red"}}>{formik.errors.name}</span>
+  const renderEmailError = formik.touched.email && formik.errors.email &&  <span style={{color:"red"}}>{formik.errors.email}</span>
+  const renderPasswordError = formik.touched.password && formik.errors.password &&  <span style={{color:"red"}}>{formik.errors.password}</span>
+
+
+  const renderForm =   <form onSubmit={formik.handleSubmit}>
+  <div>
+      <label htmlFor='name'>Name : </label>
+      <input
+          onChange={formik.handleChange}
+          value={formik.values.name}
+          type="text"
+          name="name"
+          id="name"
+           />
+          {renderNameError}
+  </div>
+  <div>
+      <label htmlFor='email'>Email : </label>
+      <input
+          onChange={formik.handleChange}
+          value={formik.values.email}
+          type="email"
+          name="email"
+          id="email"
+         />
+         {renderEmailError}
+  </div>
+  <div>
+      <label htmlFor='password'>Password : </label>
+      <input
+          onChange={formik.handleChange}
+          value={formik.values.password}
+          type="password"
+          name="password"
+          id="password"
+          />
+          {renderPasswordError}
+  </div>
+  <button type="submit">Signup</button>
+</form>
+
+    return (
+        <div>
+            <h1>User Signup</h1>
+            {renderForm}
+           
+        </div>
+    )
+}