Cannot read property 'error' of undefined. What's the problem? - node.js

Question

My REST API reasons this: {"error":"Auth failed. User does not exist"}.
I try save this error to my state using setState in React, but I have a this error: Cannot read property 'error' of undefined. What's the problem?
export const login = user =>
axios
.post('http://localhost:3000/api/users/login', {
login: user.login,
password: user.password,
})
.then(res => {
localStorage.setItem('userToken', res.data.token);
return res.data.token;
})
.catch(err => {
console.log(err);
});
Function in React.js:
onSubmit(e) {
e.preventDefault();
const user = {
login: this.state.login,
password: this.state.password,
};
login(user).then(res => {
if (!res.error) { // <- this error: TypeError: Cannot read property 'error' of undefined
this.props.history.push(`/dashboard`);
} else {
this.setState({ error: res.error });
}
});
}
This is my backend code:
// Login Action
...
return res.status(200).json({
message: 'Auth successful',
token,
});
}
res
.status(400)
.json({ error: 'Auth failed. The password is incorrect.' });
} else {
res.status(400).json({ error: 'Auth failed. User does not exist' });
}
})
.catch(err => {
res.status(400).json({ error: err });
});
};

Answer 1

Try this:
login(user).then(() => this.props.history.push(`/dashboard`))
.catch(error=>this.setState({ error })
But maybe there is another problem, you cannot normally push to state the way you do for immutability concern. I guess you know, but I post in case:
this.setState({ history: [...this.state.history, `/dashboard`] })

Answer 2

since your backend is returning a response with 400 status code, you have to handle that in the catch block of your login function. right now you are writing the error into the console and not returning anything, that is why your login response is undefined in your React code and you are getting that error.
to fix this, change the catch block of your login function so it looks something like this
.catch(err => {
console.log(err);
return {error:err};
});

Answer 3

Try this;
export const login = user =>
axios
.post('http://localhost:3000/api/users/login', {
login: user.login,
password: user.password,
})
.then(res => {
localStorage.setItem('userToken', res.data.token);
})
.then(() => return localStorage.getItem('userToken');)
.catch(err => {
console.log(err);
});