title: react-hook-form handling server-side errors in handleSubmit
body: <p>I'm having a hard time figuring out how to handle errors that don't necessarily pertain to a single input field in a <code>react-hook-form</code>.
  To put it differently, how do I handle <code>handleSubmit</code> errors?</p>
  <p>For example, having the following form:</p>
  <pre><code>import to from 'await-to-js'
  import axios, { AxiosResponse } from 'axios'
  import React from &quot;react&quot;
  import { useForm } from &quot;react-hook-form&quot;
  
  type LoginFormData = {
    username: string,
    password: string,
  }
  
  export const Login: React.FC = () =&gt; {
    const { register, handleSubmit } = useForm&lt;LoginFormData&gt;()
  
    const onSubmit = handleSubmit(async (data) =&gt; {
      const url = '/auth/local'
  
      const [err, userLoginResult] = await to&lt;AxiosResponse&gt;(axios.post(url, data))
      if (userLoginResult) {
        alert('Login successful')
      }
      else if (err) {
        alert('Bad username or password')
      }
    })
  
    return (
      &lt;div className=&quot;RegisterOrLogIn&quot;&gt;
        &lt;form onSubmit={onSubmit}&gt;
          &lt;div&gt;
            &lt;label htmlFor=&quot;username&quot;&gt;username&lt;/label&gt;
            &lt;input name=&quot;username&quot; id=&quot;username&quot; ref={register} /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label htmlFor=&quot;password&quot;&gt;Password&lt;/label&gt;
            &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; ref={register} /&gt;
          &lt;/div&gt;
          &lt;button type=&quot;submit&quot;&gt; &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p><strong>Is there a <code>react-hook-form</code> way of informing the user that there's an error with either the username or the password?</strong>
  as in, other than <code>alert()</code></p>
  <p>Perhaps this is answered elsewhere, but I could not find it.</p>
  <hr />
  <p><strong>Clarification</strong>
  The error received from the server does not pertain to a single field:</p>
  <pre><code>{
      &quot;statusCode&quot;: 400,
      &quot;error&quot;: &quot;Bad Request&quot;,
      &quot;message&quot;: [
          {
              &quot;messages&quot;: [
                  {
                      &quot;id&quot;: &quot;Auth.form.error.invalid&quot;,
                      &quot;message&quot;: &quot;Identifier or password invalid.&quot;
                  }
              ]
          }
      ],
      &quot;data&quot;: [
          {
              &quot;messages&quot;: [
                  {
                      &quot;id&quot;: &quot;Auth.form.error.invalid&quot;,
                      &quot;message&quot;: &quot;Identifier or password invalid.&quot;
                  }
              ]
          }
      ]
  }
  </code></pre>