title: How to display an Error message when logging in fails in Reactjs
body: <p>How to display an Error message when logging in fails in Reactjs.
  I want to display the alert message 'Invalid Username or Password, Please try again.' when the user logs in fails on the page. How can I do that in Reactjs?</p>
  <p>the code:</p>
  <pre><code>    login.js
  export default function LogIn() {
      let history = useHistory();
      const initialFormData = Object.freeze({
          username: '',
          password: '',
      });
  
  const [formData, updateFormData] = useState(initialFormData);
  
  const handleChange = (e) =&gt; {
      updateFormData({
          ...formData,
          [e.target.name]: e.target.value.trim(),
      });
  };
  
  const handleSubmit = (e) =&gt; {
      e.preventDefault();
      console.log(formData);
  
      axiosInstance
          .post(`token/`, {
              username: formData.username,
              password: formData.password,
          })
          .then((res) =&gt; {
              localStorage.setItem('access_token', res.data.access);
              localStorage.setItem('refresh_token', res.data.refresh);
              axiosInstance.defaults.headers['Authorization'] =
                  'JWT ' + localStorage.getItem('access_token');
                  history.push(&quot;/home&quot;);
              
          });
  };
  return (
      &lt;Box component=&quot;form&quot; onSubmit={handleSubmit} noValidate&gt;
        &lt;TextField
             margin=&quot;normal&quot;
             required
             id=&quot;username&quot;
             label=&quot;username&quot;
             name=&quot;username&quot;
             autoComplete=&quot;username&quot;
             autoFocus
             onChange={handleChange}/&gt;
  
        &lt;TextField
          margin=&quot;normal&quot;
          required
          name=&quot;password&quot;
          label=&quot;password&quot;
          type=&quot;password&quot;
          id=&quot;password&quot;
          autoComplete=&quot;current-password&quot;
          onChange={handleChange}/&gt;
                          
           &lt;Button type=&quot;submit&quot; onClick={handleSubmit}&gt;
                   LOG IN
            &lt;/Button&gt;            
            &lt;/Box&gt;    
  );}
  </code></pre>
  <p>Thank you in advance.</p>