Registration.js

gistfile1.txt

import React, { useState } from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";

const Registration = () => {
  const [state, setState] = useState({ fullName: "", email: "" });

  //   const sendEmail = (e) => {
  //     e.preventDefault();
  //     console.log("sending emails");
  //   };

  //   const inputHandler = (e) => {
  //     const { name, value } = e.target;
  //     console.log("name: " + name + " value: " + value);
  //     setState({ ...state, [name]: value });
  //   };

  console.log("state ", +state);
  return (
    <Formik
      initialValues={{
        fullName: "",
        email: "",
      }}
      validationSchema={Yup.object().shape({
        fullName: Yup.string().required("Full name is required"),
        email: Yup.string()
          .email("Email is invalid")
          .required("Email is required"),
      })}
      onSubmit={(fields) => {
        alert("SUCCESS!! :-)\n\n" + JSON.stringify(fields.fullName, null, 4));
        setState({ ...state, fullName: fields.fullName, email: fields.email });
      }}
      render={({ errors, status, touched }) => (
        <Form>
          <div className="form-group">
            <label htmlFor="fullName">Full Name</label>
            <Field
              name="fullName"
              type="text"
              className={
                "form-control" +
                (errors.fullName && touched.fullName ? " is-invalid" : "")
              }
            />
            <ErrorMessage
              name="fullName"
              component="div"
              className="invalid-feedback"
            />
          </div>

          <div className="form-group">
            <label htmlFor="email">Email</label>
            <Field
              name="email"
              type="text"
              className={
                "form-control" +
                (errors.email && touched.email ? " is-invalid" : "")
              }
            />
            <ErrorMessage
              name="email"
              component="div"
              className="invalid-feedback"
            />
          </div>

          <div className="form-group">
            <button type="submit" className="btn btn-primary mr-2">
              Register
            </button>
            <button type="reset" className="btn btn-secondary">
              Reset
            </button>
          </div>
        </Form>
      )}
    />
  );
};

export default Registration;