formik form

import React from "react";

import { withFormik } from "formik";
import * as yup from "yup";
import axios from "axios";

const RegForm = ({
  values,
  errors,
  touched,
  handleChange,
  handleBlur,
  handleSubmit,
  isSubmiting,
}) => {
  return (
    <div className="signup">
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>
            Ник*:
            <input
              type="text"
              name="username"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.username}
              placeholder="Username"
            />
          </label>
          {touched.username &&
            errors.username && <p className="error">{errors.username}</p>}
        </div>

        <div className="form-group">
          <label>
            Имя*:
            <input
              type="text"
              name="screenname"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.screenname}
              placeholder="screenname"
            />
          </label>
          {touched.screenname &&
            errors.screenname && <p className="error">{errors.screenname}</p>}
        </div>

        <div className="form-group">
          <label>
            Email*:
            <input
              type="text"
              name="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
              placeholder="Email"
            />
          </label>
          {touched.email &&
            errors.email && <p className="error">{errors.email}</p>}
        </div>

        <div className="form-group">
          <label>
            Пароль*:
            <input
              type="password"
              name="password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
              placeholder="Пароль"
            />
          </label>
          {touched.password &&
            errors.password && <p className="error">{errors.password}</p>}
        </div>
        <div className="form-group">
          <label>
            Подтверждение пароля*:
            <input
              type="password"
              name="passwordConfirm"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.passwordConfirm}
              placeholder="Подтвердите Пароль"
            />
          </label>
          {touched.passwordConfirm &&
            errors.passwordConfirm && (
              <p className="error">{errors.passwordConfirm}</p>
            )}
        </div>
        <button type="submit" disabled={isSubmiting}>
          Отправить
        </button>
      </form>
    </div>
  );
};

export default withFormik({
  mapPropsToValues: ({ values }) => ({
    username: "",
    screenname: "",
    email: "",
    password: "",
    passwordConfirm: "",
  }),
  validationSchema: yup.object().shape({
    username: yup.string().required("Поле не заполнено"),
    screenname: yup.string().required("Поле не заполнено"),
    email: yup
      .string()
      .email("Неверный формат")
      .required("Поле не заполнено"),
    password: yup
      .string()
      .min(5, "Пароль короткий")
      .required("Поле не заполнено"),
    passwordConfirm: yup
      .string()
      .oneOf([yup.ref("password")], "Пароли не совпадает")
      .required("Поле не заполнено"),
  }),
  handleSubmit: (values, { props, setErrors }) => {
    axios
      .post("/api/v1/signup", values)
      .then(res => {
         // redirect if success
         props.onSubmit()
       })
      .catch(({ response }) => {
        const { errors } = response.data;
        setErrors(errors);
      });
  },
})(RegForm);