title: Formik | How to user Multiple validation schemas and render Split Views for a form
body: <blockquote>
    <p>I understand this may be an unothodox question, or even 2 in one, but
    please believe me when I say thiese 2 cannot be answered seperately.
    Please keep that in mind. Thank you for your time..</p>
  </blockquote>
  
  <p>My question revolves around a particular scenario I am currently facing. I am using the withFormik H.O.C, along with Yup, to handle various cases in my forms, such as submitting, errorHandling, and a few more depending on the situation.</p>
  
  <p>Usually, my form situation involves a Create and an Edit Mode.</p>
  
  <p><strong>onCreate</strong> => Pass the defaultvalues and call the POST Method, from my services.</p>
  
  <p><strong>onEdit</strong> => Populate the values with the current Item Values from the Server, and call the PUT Method from the services.</p>
  
  <p>Example</p>
  
  <pre><code>  const validationSchema = Yup.object().shape({
      username: Yup.string('Provide a Username').required('Username is Required'),
      email: Yup.string().email('Provide a Valid email Address'),
      password: Yup.string('Provide a Password').required('Password is required'),
      confirmPassword: Yup.string('Provide your password again')
        .required('Password Confirmation is Required')
        .oneOf([Yup.ref('password')], 'Passwords do not match'),
    });
  
    const EnchancedCreateUserForm = withFormik({
      mapPropsToValues: ({
        user = {
          username: '',
          email: '',
          password: '',
          confirmPassword: '',
        }
      }) =&gt; ({ ...user }),
  
      validationSchema,
  
      handleSubmit: (values, { props, setSubmitting }) =&gt; {
        const { doSubmit, onSave, inEditMode } = props;
  
        const saveUser = inEditMode ? updateUser : createUser;
        return doSubmit(saveUser, values)
          .then(() =&gt; {
            setSubmitting(false);
            onSave();
          })
          .catch(() =&gt; {
            setSubmitting(false);
          });
      },
  
      displayName: 'AddEditUser'
    })(AddEditUser);
  </code></pre>
  
  <p>That is actually been working great for me, since my Create and Edit Form are the same. And here lay my 2 problems.</p>
  
  <p>Current Situation
  My current form implementation has 2 views. One unified one on Create with those 4 fields, and on Edit, I have 2 forms. One for passwordChange and one for infoChange. Which makes me face the following problems.</p>
  
  <p>I would need 3 FormValidationSchemas(CREATE, EDIT-INFO, EDIT-PASSWORD). Which I am not sure formik even supports.
  How exactly, should I handle the rest of the functionality, onSubmit, ErrorMessage for both field error and statusError?
  If you could actually help me out figure a way of attack it would be great.</p>
  
  <p>I read the validationSchema can be passed a function that returns a validationSchema, so I did this, but it is not working:</p>
  
  <pre><code>  const validationFullSchema = Yup.object().shape({
      username: Yup.string('Provide a Username').required('Username is Required'),
      email: Yup.string().email('Provide a Valid email Address'),
      password: Yup.string('Provide a Password').required('Password is required'),
      confirmPassword: Yup.string('Provide your password again')
        .required('Password Confirmation is Required')
        .oneOf([Yup.ref('password')], 'Passwords do not match'),
    });
  
    const validationEditSchema = Yup.object().shape({
      username: Yup.string('Provide a Username').required('Username is Required'),
      email: Yup.string().email('Provide a Valid email Address'),
    });
  
   const validationSchemaFn = () =&gt; {
       If ( efitMode ) {
         return validationCreateSchema
  </code></pre>
  
  <p>}
  return validationEditSchema
  }</p>
  
  <pre><code>  validationSchema: validationSchemaFn(),
    // Which throws an error
    // Failed to load app. Error: Cannot read property 'props' of undefined
  </code></pre>
  
  <p>I probably am doing something wrong, but I put it here just in case.</p>
  
  <p>My Opinion on the matter</p>
  
  <ul>
  <li>Create 2 Form Components(PasswordFormComponent, InfoFormComponent), and wrap each one with the H.O.C, allowing them access to the withFormik independantly.</li>
  <li>For CreateForm, convert it into a container Component, that renders both of those components</li>
  <li>For Edit instead of calling the whole form, which is currently what is happening, call for each situation the specific component.</li>
  </ul>
  
  <p>What do you of my proposed solution? If you like it, could you please make it better or help with some code samples, especially in the multiple <code>validationSchemas</code> issues. Thank you!!</p>