title: Can't pass errors from API response to Formik error display
body: <p>I am using React, Formik and yup to submit data to a REST API.</p>
  
  <p>My React component is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import { render } from "react-dom";
  import { Formik, Field, Form, ErrorMessage } from "formik";
  import * as Yup from "yup";
  import { BrowserRouter } from "react-router-dom";
  
  import App from "./App";
  
  const ContactUsFormSchema = Yup.object().shape({
    givenName: Yup.string()
      .required("First name is required")
      .max(50, "Your first name must be 2 to 50 characters")
      .min(2, "Your first name must be 2 to 50 characters"),
    surname: Yup.string()
      .required("Your last name is required")
      .max(50, "Your last name must be 2 to 50 characters")
      .min(2, "Your last name must be 2 to 50 characters"),
    email: Yup.string()
      .email()
      .required("EMail address is required")
      .max(100, "Your email address can't be longer than 100 characters")
  });
  
  class Register extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button
            id="home"
            onClick={() =&gt; this.loadHome()}
            className="square-button"
          &gt;
            Home
          &lt;/button&gt;
  
          &lt;h1&gt;SpringBoot/React OAuth2 Registration Page&lt;/h1&gt;
          &lt;Formik
            initialValues={{
              givenName: this.props.user.givenName,
              surname: this.props.user.surname,
              email: this.props.user.email,
              mobile: this.props.user.mobile
            }}
            validationSchema={ContactUsFormSchema}
            // on submit Formik will call this passing the values and actions; call the doSubmit method passing them and the form itself
            // Passing the form itself allows an action to be performed after the API call returns
            onSubmit={(values, actions) =&gt; this.doSubmit(values, actions, this)}
            // the render method returns the actual form; note each field has a corresponding error field
            render={({ errors, touched, isSubmitting }) =&gt; (
              &lt;Form&gt;
                First Name:
                &lt;Field type="text" name="givenName" /&gt;
                &lt;ErrorMessage name="givenName"&gt;
                  {errorMessage =&gt; &lt;div className="error"&gt;{errorMessage}&lt;/div&gt;}
                &lt;/ErrorMessage&gt;
                Last Name:
                &lt;Field type="text" name="surname" /&gt;
                &lt;ErrorMessage name="surname"&gt;
                  {errorMessage =&gt; &lt;div className="error"&gt;{errorMessage}&lt;/div&gt;}
                &lt;/ErrorMessage&gt;
                Email Address:
                &lt;Field type="text" name="email" /&gt;
                &lt;ErrorMessage name="email"&gt;
                  {errorMessage =&gt; &lt;div className="error"&gt;{errorMessage}&lt;/div&gt;}
                &lt;/ErrorMessage&gt;
                Mobile:
                &lt;Field type="text" name="mobile" /&gt;
                &lt;ErrorMessage name="mobile"&gt;
                  {errorMessage =&gt; &lt;div className="error"&gt;{errorMessage}&lt;/div&gt;}
                &lt;/ErrorMessage&gt;
                &lt;p /&gt;
                {this.props.result}
                &lt;button type="submit" disabled={isSubmitting}&gt;
                  Register
                &lt;/button&gt;
              &lt;/Form&gt;
            )}
          /&gt;
        &lt;/div&gt;
      );
    }
  
    doSubmit = (values, actions, form) =&gt; {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("POST", "http://localhost:8080/register", true);
      xmlhttp.setRequestHeader("Accept", "application/json");
      xmlhttp.setRequestHeader("Authorization", window.sessionStorage.jwt);
      xmlhttp.setRequestHeader("Content-type", "application/json");
      xmlhttp.onreadystatechange = function() {
        // Function called when the state changes.
        if (xmlhttp.readyState === 4) {
          actions.setSubmitting(false);
          if (xmlhttp.status === 200) {
            render(
              &lt;BrowserRouter&gt;
                &lt;App /&gt;
              &lt;/BrowserRouter&gt;,
              document.getElementById("root")
            );
          } else if (xmlhttp.status === 400) {
            actions.setErrors(JSON.parse(xmlhttp.responseText).errors);
          }
        }
      };
      xmlhttp.send(JSON.stringify(values));
    };
  }
  
  export default Register;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The JSON data returned by the API is</p>
  
  <pre><code>{
    "errorCode": "Validation failed",
    "errors": [
      {
        "errorMessage": "Phone numbers must consist of digits and spaces only with an optional + sign at the front",
        "field": "mobile"
      }
    ]
  }
  </code></pre>
  
  <p>I'm really, really new to JavaScript let alone React etc. so I'm totally confused about why the errors aren't being populated as I would expect and would appreciate any help anyone would care to give.</p>