Unhandled Rejection (typeError): Cannot read property of undefined using reactjs axios on google chrome mobile

Question

When inputting incorrect information in my google chrome browser in my laptop I get the error response here's a screenshot of the response in my laptop browser using this code

axios
        .post(`${strapi}/auth/local`, loginData)
        .then(res => {
          if (undefined === res.data.jwt) {
            this.setState({error: res.data.message, Loading: false});
            return;
          }

          sessionStorage.setItem('JWT', res.data.jwt);
          sessionStorage.setItem('username', res.data.user.username);
          sessionStorage.setItem('role', res.data.user.role.type);


          this.setState({Loading: false, token: res.data.jwt, username: res.data.user.username, userEmail: res.data.user.email, isLoggedIn: true});
          // window.location.href = '/';
        })
        .catch(err => {
          this.setState({
            error:err.response.data.message[0].messages[0].message
          })
          console.log(this.state.error)
        })

however when logging in to my mobile chrome browser using the same lline of code this appears mobile screenshot

how to fix this issue?

Answer 1

This type of error occur when you are not getting your error.response.

So, what you can do is you can set default message if you get any unknown errors.

     let MESSAGE;

     if(error.response){
         MESSAGE = err.response.data.message[0].messages[0].message
     }else{
          MESSAGE = 'Something went wrong.'
     }

     this.setState({
         error: MESSAGE
      })

Or else you can log your error why this happen

 console.log('error',error)