title: How to Validate Multiple Phone Numbers with Formik Yup
body: <p>I am building a form a where a user can store multiple phone numbers and set the privacy of that number (whether he wants the number to be publicly displayed or not).</p>
  
  <p>I have succesfully created the form but stuck in <strong>formik-yup validation</strong> and <strong>getting the values</strong> (phone number with privacy value) to further send it to backend.</p>
  
  <pre><code>import React, { Component } from "react";
  import { Formik, Form, Field, ErrorMessage, FieldArray } from "formik";
  import * as Yup from "yup";
  
  import DropDown from "./DropDown";
  
  const phoneNumberPrivacyDropdown = [
    { value: "private", option: "Private" },
    { value: "public", option: "Public" }
  ];
  const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/; // for Mobile Numbers
  
  export default class PhoneNumbers extends Component {
    constructor(props) {
      super(props);
      this.state = {
        phoneNumbers: [{ privacy: "", number: "" }]
      };
      this.addNewPhoneNumber = this.addNewPhoneNumber.bind(this);
      this.removePhoneNumber = this.removePhoneNumber.bind(this);
    }
    addNewPhoneNumber() {
      let newPhoneNumber = { privacy: "", number: "" };
      this.setState({
        phoneNumbers: [...this.state.phoneNumbers, newPhoneNumber]
      });
    }
    removePhoneNumber = key =&gt; {
      let phoneNumbers = this.state.phoneNumbers;
      phoneNumbers.splice(key, 1);
      this.setState({
        phoneNumbers: phoneNumbers
      });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1 className="form-subHead"&gt;Multiple Phone Numbers.&lt;/h1&gt;
          &lt;Formik
            initialValues={{
              phoneNumbers: this.state.phoneNumbers
            }}
            validationSchema={Yup.object().shape({
              phoneNumbers: Yup.array().of(
                Yup.object().shape({
                  mobile: Yup.string()
                    .required("Please tell us your mobile number.")
                    .length(10, "Please enter a valid mobile number.")
                    .matches(phoneRegExp, "Please enter a valid mobile number.")
                })
              )
            })}
            onSubmit={(values, { resetForm, setErrors, setSubmitting }) =&gt; {
              setTimeout(() =&gt; {
                console.log("Getting form values - ", values);
                setSubmitting(false);
              }, 500);
            }}
            enableReinitialize={true}
          &gt;
            {props =&gt; {
              const {
                values,
                touched,
                dirty,
                errors,
                isSubmitting,
                handleChange,
                handleBlur,
                setFieldValue,
                setFieldTouched
              } = props;
  
              return (
                &lt;Form id="signUpForm" className="signinupForm mt-4" noValidate&gt;
                  &lt;div className="formSection"&gt;
                    &lt;div className="row form-row"&gt;
                      &lt;div className="col-sm-6"&gt;
                        &lt;div className="form-group phoneNumberGroup"&gt;
                          &lt;label htmlFor="phoneNumbers" className="form-label"&gt;
                            Phone Number
                          &lt;/label&gt;
                          {this.state.phoneNumbers.map((phoneNumber, i) =&gt; (
                            &lt;div className="phoneNumber" key={i}&gt;
                              &lt;Field
                                type="number"
                                name={`phone${i + 1}`}
                                placeholder="Contact Number"
                                className="form-control mobileNumber"
                              /&gt;
                              &lt;div className="selectPhonePrivacy"&gt;
                                &lt;DropDown
                                  items={phoneNumberPrivacyDropdown}
                                  inputname="phonePrivacy"
                                  showIconOnly={false}
                                /&gt;
                              &lt;/div&gt;
                              {i != 0 &amp;&amp; (
                                &lt;span
                                  className="modifyInput removeElement"
                                  onClick={() =&gt; this.removePhoneNumber({ i })}
                                &gt;
                                  -
                                &lt;/span&gt;
                              )}
                              &lt;ErrorMessage
                                name="mobile"
                                component="span"
                                className="invalid-input"
                              /&gt;
                            &lt;/div&gt;
                          ))}
                          {this.state.phoneNumbers.length &lt;= 2 &amp;&amp; ( // only upto 3 phone numbers allowed!
                            &lt;a
                              className="modifyInput addElement"
                              onClick={this.addNewPhoneNumber}
                            &gt;
                              Add Another Phone
                            &lt;/a&gt;
                          )}
                        &lt;/div&gt;
                        {/* Phone Numbers Group */}
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="text-center"&gt;
                    &lt;button
                      type="submit"
                      className="btn btn-filled"
                      disabled={!dirty || isSubmitting}
                    &gt;
                      Finish
                    &lt;/button&gt;
                    {/*Submit */}
                  &lt;/div&gt;
                &lt;/Form&gt;
              );
            }}
          &lt;/Formik&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here is a codesandbox demo for the actual codes - 
  <a href="https://codesandbox.io/s/dynamic-field-validation-7t1ww" rel="nofollow noreferrer">https://codesandbox.io/s/dynamic-field-validation-7t1ww</a></p>