title: Create dynamic Yup validation schema from JSON
body: <p>I'm trying to use <code>Yup</code> along with <code>Formik</code> in my react form. The form fields are going to be dynamic so as their validations. </p>
  
  <pre><code>export const formData = [
    {
      id: "name",
      label: "Full name",
      placeholder: "Enter full name",
      type: "text",
      required: true,
      value: "User name",
      values: [],
      validations: [
        {
          type: "minLength",
          value: "5",
          error_message: "name should be atleast 5 char long"
        },
        {
          type: "maxLength",
          value: "10",
          error_message: "name should be atleast 5 char long"
        }
      ]
    },
    {
      id: "email",
      label: "Email",
      placeholder: "Email",
      type: "text",
      required: true,
      value: "email",
      values: [],
      validations: [
        {
          type: "minLength",
          value: "5",
          error_message: "name should be atleast 5 char long"
        },
        {
          type: "maxLength",
          value: "10",
          error_message: "name should be atleast 5 char long"
        },
        {
          type: "email",
          error_message: "Valid email"
        }
      ]
    },
    {
      id: "phoneNumber",
      label: "phone number",
      type: "text",
      required: true,
      value: "7878787878",
      values: [],
      validations: [
        {
          type: "minLength",
          value: "5",
          error_message: "name should be atleast 5 char long"
        },
        {
          type: "maxLength",
          value: "10",
          error_message: "name should be atleast 5 char long"
        },
        {
          type: "required",
          error_message: "phone number is required"
        }
      ]
    },
    {
      id: "total",
      label: "Total People in Family",
      placeholder: "family members count",
      type: "text",
      required: false,
      value: "1",
      values: [],
      validations: [
        {
          type: "minLength",
          value: "1",
          error_message: "there should be atleast 1 family member"
        },
        {
          type: "maxLength",
          value: "5",
          error_message: "max family members can be 5"
        }
      ]
    }
  ]
  
   let validateSchema = yup.object().shape({
       name: yup.string().required("name is required"),
       email: yup.string().email(),
       phoneNumber: yup.number().min(10, "minium 10 numbers"),
       total: yup
         .number()
         .min(1, "minium 1 member")
         .max(5, "max 5 member")
         .required("member is required")    });
  </code></pre>
  
  <ul>
  <li>What I'm currently doing is iterating over the above array and calling the corresponding React form components. </li>
  <li>Validation is currently handled by <code>Yup</code>. I'm aware that you can create static Yup validation schema like above `validateSchema' variable.</li>
  <li>Now I want to create this validation schema depending upon the values
  in the <code>formData.validation</code> array. I tried some of the ways in this
  <a href="https://codesandbox.io/s/kind-jepsen-6g37f?fontsize=14" rel="noreferrer">codesandbox</a> but still unable to figure it out. Also, I looked
  into the <code>Yup.lazy</code> but it seems highly confusing to me.</li>
  </ul>
  
  <p>Any help will be appreciated :) </p>
  
  <p><a href="https://codesandbox.io/s/kind-jepsen-6g37f?fontsize=14" rel="noreferrer">Codesandbox</a></p>