How to use formik with useFormik prop in react

Formik is a super cool library and I use it every time. So today I am writing this post for beginners and it covers the use of formik on the simple login form.

I’ll cover these things here

• Create and style a basic login form
• Initialize formik default states
• Apply validation on login fields
• Write submit form function

Create and style a login form

I created a login form like this

<form className="form">
        <div className="field">
          <label htmlFor="email">Email Address</label>
          <input
            id="email"
            name="email"
            type="email"
          />
        </div>
        <div className="field">
          <label htmlFor="password">Password</label>
          <input
            id="password"
            name="password"
            type="password"
          />
        </div>
        <button type="submit" className="submit-btn">
          Login
        </button>
      </form>

and styled it like this

.form {
  width: 300px;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  background-color: #ddd;
  border-radius: 8px;
  padding: 10px;
}
.field {
  display: flex…