React-formik-yup

import React from "react";
import { withFormik, Form, Field } from "formik";
import { object, string, boolean, mixed } from "yup";

const SignUpForm = ({
  values,
  isValid,
  setFieldValue,
  setFieldTouched,
  dirty,
  errors,
  touched,
  isSubmitting
}) => (
  <Form>
    <h1>Sign up</h1>
    <label htmlFor="email"> Your email</label>
    <Field name="email" type="text" placeholder="myusername" />
    {touched.email && errors.email ? (
      <div id="feedback">{errors.email}</div>
    ) : null}
    <br />
    <label htmlFor="password"> Your password </label>
    <Field name="password" type="password" placeholder="Password" />
    {touched.password && errors.password && <p>{errors.password}</p>}
    <br />
    <br />
    <div>All 3 chekbox required</div>
    <label htmlFor="checkbox1">Checkbox 1</label>
    <Field type="checkbox" name="checkbox1" />
    {touched.checkbox && errors.checkbox1 && <p>{errors.checkbox1}</p>}
    <br />
    <label htmlFor="checkbox2">Checkbox 2</label>
    <Field type="checkbox" name="checkbox2" />
    {touched.checkbox2 && errors.checkbox2 && <p>{errors.checkbox2}</p>}
    <br />
    <label htmlFor="checkbox3">Checkbox 3</label>
    <Field type="checkbox" name="checkbox3" />
    {touched.checkbox3 && errors.checkbox3 && <p>{errors.checkbox3}</p>}
    <br />
    <label>Male</label>
    <Field name="gender" type="radio" value="Male" />
    <label>Female</label>
    <Field name="gender" type="radio" value="Female" />
    {touched.gender && errors.gender ? <p>{errors.gender}</p> : null}
    <br />
    <Field name="bus" component="select">
      <option value="">select Bus</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </Field>
    {touched.bus && errors.bus && <p>{errors.bus}</p>}
    <br />
    <br />
    <div>Other chekbox required</div>
    <label htmlFor="checkbox4">Consent</label>
    <Field type="checkbox" name="checkbox4" />
    or
    <br />
    <label htmlFor="checkbox5">Promotional</label>
    <Field type="checkbox" name="checkbox5" />
    <br />
    <br />
    <br />
    <input type="submit" value="Signup" disabled={isSubmitting} />
  </Form>
);

const initialValues = {
  email: "sunny@hgh.in" || "",
  password: "asdfg" || "",
  checkbox1: false,
  checkbox2: false,
  checkbox3: false,
  gender: "",
  bus: "",
  checkbox4: false,
  checkbox5: false
};

const validationSchema = object().shape({
  email: string().email(),
  password: string()
    .min(5, "minimum 5 characters for password")
    .required("password is required field"),
  checkbox1: boolean()
    .test(
      "is-checkbox1",
      "You have to agree with our Terms and Conditions!",
      value => value === true
    )
    .required(),
  checkbox2: boolean()
    .test(
      "is-checkbox2",
      "You have to agree with our Terms and Conditions2!",
      value => value === true
    )
    .required(),
  checkbox3: boolean()
    .test(
      "is-checkbox3",
      "You have to agree with our Terms and Conditions3!",
      value => value === true
    )
    .required(),
  gender: string().required(),
  bus: string().required(),
  checkbox4: mixed()
    .oneOf([true], "Please accept the privacy consent")
    .required()
});

const mapPropsToValues = () => {
  return initialValues;
};

const handleSubmit = (values, { setErrors, resetForm, setSubmitting }) => {
  console.log(values);
  setSubmitting = false;
};

export default withFormik({
  mapPropsToValues,
  validationSchema,
  handleSubmit,
  displayName: "EnterpriseProfileForm"
})(SignUpForm);





//<Input type="file" name="datasetFiles" accept={`.${values.datasetFilesType.value}`}  multiple cols="12 d-none" id="file-upload-1" 
                //onChange={event => setFieldValue("datasetFiles", event.currentTarget.files)} />
                
                
                
                //datasetFiles: mixed().required().test(
            //"noOfDatasets",
            //"Required",
            //value => value && value.length >= 1
          //),
          
// Conditional Validation based on siblings

  // disease: object({
  //   value: string().required('Please tag the datasets with existing conditions')
  // }),
  // therapeutic: mixed().when('disease', (val, schema) => {
  //   if (val.value === 'not healthy') {
  //     return schema.required();
  //   } else {
  //     return schema;
  //   }
  // })