How to show alert message when invalid login credentials in React Native?

Question

I want to show an alert message when user login fails.But alert is not showing.Following is my code in react native.

login

   onPressLogin(){
    fetch('http://192.168.1.10:3000/users/login',{
        method: 'POST',
        headers:{
                'Content-Type' : 'application/json',
        'Accept':'application/json'
            },
            body: JSON.stringify({
                contact:this.state.contact,
                password: this.state.password,
            })
})
  .then(response => response.json())
  .then((responseData) =>
        {
    this.setState({
        userdetail: responseData,
        })
if(responseData){
  setTimeout(() => {
    Actions.firstScreen();
  }, 2300);
  AsyncStorage.saveItem('userid', this.state.userData.phone_no);

} else {
  console.log(responseData);
  Alert(responseData);
}
}); 

}

What I'm getting now is it will redirect to firstScreen on successful login but it alert is not coming on unsuccessful login.When I consoled I'm getting unexpected end of json input error but I'm using node js as backend the error result is showing there following is my code in nodejs

else {
                 appData.error= 1;
                 appData["data"] = "Phone number and Password does not match";
                 res.status(204).json(appData);
                 console.log(appData);
               }
             }else{
               appData.error=1;
               appData["data"] ="Phone number does not exist";
               res.status(204).json(appData);
               console.log(appData);
             }

the consoled result of appData is

{ error: 1, data: 'Phone number does not exist' }

I don't know the reason why this error message is not showing within responseData in react native.

Answer 1

onPressLogin(){
fetch('http://192.168.1.10:3000/users/login',{
    method: 'POST',
    headers:{
            'Content-Type' : 'application/json',
    'Accept':'application/json'
        },
        body: JSON.stringify({
            contact:this.state.contact,
            password: this.state.password,
        })
})
.then(response => response.json())
.then((responseData) =>{
    if(responseData.error !== 1){ // verify the success case, as you didn't provide the success case i am using the error code 
        this.setState({ // its recommended you verify the json before setting it to state.
            userdetail: responseData,
        })
        setTimeout(() => {
            Actions.firstScreen();
        }, 2300);
        AsyncStorage.setItem('userid', this.state.userData.phone_no); // its setItem not saveitem.
    } else {
        console.log(responseData);
        Alert.alert(JSON.stringify(responseData)); // Alerts doesn't allow arrays or JSONs, so stringify them to view in Alerts
    }
}).catch((error) => {
    // handle catch
    console.log("error:"+JSON.stringify(error));
});

}

Always use 'catch' at the end of promises and handle them.

Do let me know if you still face the issue.