title: How to properly use Formik's setError method? (React library)
body: <p>I am using React communicating with a backend. Now trying to properly implement Formik (Form library).</p>
  
  <p>Main question:
  <strong>How do I properly use Formik's setError method?</strong></p>
  
  <p>Client side validation errors show properly, but now I am trying to set/show the backend validation errors, which are returned with a response with status code 400.</p>
  
  <p><a href="https://jaredpalmer.com/formik/docs/api/formik#seterrors-fields-field-string-string-void" rel="noreferrer">Link</a> to the docs on the method I am trying to use</p>
  
  <p>I am using this method in the method named <em>handle400Error</em> in the code below.</p>
  
  <p>My React (and Formik) code:</p>
  
  <pre><code>import React, { Component } from "react";
  import axios from "axios";
  import { Formik } from "formik";
  import * as Yup from "yup";
  import styled from "styled-components";
  import FormError from "../formError";
  
  const Label = styled.label``;
  
  class LoginForm extends Component {
    initialValues = {
      password: "",
      username: ""
    };
  
    getErrorsFromValidationError = validationError =&gt; {
      const FIRST_ERROR = 0;
      return validationError.inner.reduce((errors, error) =&gt; {
        return {
          ...errors,
          [error.path]: error.errors[FIRST_ERROR]
        };
      }, {});
    };
  
    getValidationSchema = values =&gt; {
      return Yup.object().shape({
        password: Yup.string()
          .min(6, "Password must be at least 6 characters long")
          .required("Password is required!"),
        username: Yup.string()
          .min(5, "Username must be at least 5 characters long")
          .max(40, "Username can not be longer than 40 characters")
          .required("Username is required")
      });
    };
  
    handleSubmit = async (values, { setErrors }) =&gt; {
      console.log("handleSubmit");
  
      try {
        const response = await axios.post(
          "http://127.0.0.1:8000/rest-auth/login/",
          values
        );
        const loginToken = response.data["key"];
        this.handleLoginSuccess(loginToken);
      } catch (exception) {
        // Expected: 400 status code
        if (exception.response &amp;&amp; exception.response.status === 400) {
          // Display server validation errors
          this.handle400Error(exception.response.data, setErrors);
        }
        console.log("exception", exception);
        console.log("exception.response", exception.response);
      }
    };
  
    handle400Error = (backendErrors, setErrors) =&gt; {
      let errors = {};
      for (let key in backendErrors) {
        errors[key] = backendErrors[key][0]; // for now only take the first error of the array
      }
      console.log("errors object", errors);
      setErrors({ errors });
    };
  
    handleUnexpectedError = () =&gt; {};
  
    handleLoginSuccess = loginToken =&gt; {
      console.log("handleLoginSuccess");
      this.props.setGreeneryAppState({
        loginToken: loginToken
      });
      this.props.history.replace(`/${this.props.locale}/`);
    };
  
    validate = values =&gt; {
      const validationSchema = this.getValidationSchema(values);
      try {
        validationSchema.validateSync(values, { abortEarly: false });
        return {};
      } catch (error) {
        return this.getErrorsFromValidationError(error);
      }
    };
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;h1&gt;Login&lt;/h1&gt;
          &lt;Formik
            initialValues={this.initialValues}
            validate={this.validate}
            validationSchema={this.validationSchema}
            onSubmit={this.handleSubmit}
            render={({
              errors,
              touched,
              values,
              handleBlur,
              handleChange,
              handleSubmit
            }) =&gt; (
              &lt;form onSubmit={handleSubmit}&gt;
                {errors.non_field_errors &amp;&amp; (
                  &lt;formError&gt;{errors.non_field_errors}&lt;/formError&gt;
                )}
                &lt;Label&gt;Username&lt;/Label&gt;
                &lt;input
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.username}
                  type="text"
                  name="username"
                  placeholder="Enter username"
                /&gt;
                {touched.username &amp;&amp;
                  errors.username &amp;&amp; &lt;FormError&gt;{errors.username}&lt;/FormError&gt;}
                &lt;Label&gt;Password&lt;/Label&gt;
                &lt;input
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.password}
                  type="password"
                  name="password"
                  placeholder="Enter password"
                /&gt;
                {touched.password &amp;&amp;
                  errors.password &amp;&amp; &lt;FormError&gt;{errors.password}&lt;/FormError&gt;}
                &lt;button type="submit"&gt;Log in&lt;/button&gt;
              &lt;/form&gt;
            )}
          /&gt;
        &lt;/React.Fragment&gt;
      );
    }
  </code></pre>