Axios throwing Internal server error but api url works - node.js

Question

I hope you are all safe.
My problem:
the URL is working fine, there is no undefined URL error there. when i entered good credentials, it works fine and take me to the location i wish. But anytime i am trying to view the errors, it doesn't appear. Even, in the if condition i try to console.log(res.data.errors) but nothing shows. Even console.log("Hello it not working") doesn't work at all in the if condition... I am confused. Would u help please? but the else works fine. what am i doing wrong please?
import React, { useState } from "react";
import { Link } from "react-router-dom";
import SideBar from "../components/SideBar";
import "./profil.css";
import axios from "axios";
function Profil() {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleLogin = (e) => {
e.preventDefault();
const emailError = document.querySelector(".email.error");
const passwordError = document.querySelector(".password.error");
axios({
method: "post",
url: `${process.env.REACT_APP_API_URL}api/user/login`,
withCredentials: true,
data: {
email,
password,
},
})
.then((res) => {
if (res.data.errors) {
emailError.innerHTML = res.data.errors.email;
passwordError.innerHTML = res.data.errors.password;
} else {
window.location = "/";
}
})
.catch((err) => {
if (err.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(err.response.data);
console.log(err.response.status);
console.log(err.response.headers);
} else if (err.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(err.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', err.message);
}
console.log(err.config);
});
};
return (
<>
<SideBar />
<div className="form-container">
<input type="checkbox" id="flip" />
<div className="cover">
<div className="front">
<img src="dog-4977599_1920.jpg" alt="" />
<div className="text">
<span className="text-i">Welcome to ChablisLAB</span>
<span className="text-j">Please Login before continue</span>
</div>
</div>
<div className="back">
<img className="backImg" src="diary-92652_1920.jpg" alt="" />
<div className="text">
<span className="text-i">Welcome to ChablisLAB</span>
<span className="text-j">Just a few step to gain access</span>
</div>
</div>
</div>
<form>
<div className="form-content">
<div className="login_form">
<div className="title">Login</div>
<div className="input_boxes">
<div className="input_box">
<i className="bx bx-envelope"></i>
<input
type="email"
onChange={(e) => setEmail(e.target.value)}
value={email}
placeholder="Enter your email"
/>
</div>
<div className="email error"></div>
<div className="input_box">
<i className="bx bxs-lock"></i>
<input
type="password"
onChange={(e) => setPassword(e.target.value)}
value={password}
placeholder="Password"
/>
</div>
<div className="password error"></div>
<div className="box_forgot_pass">
<Link to="#">Forgot password?</Link>
</div>
<div className="button input_box">
<input onClick={handleLogin} type="submit" value="Login" />
</div>
<div className="text sign-up-text">
Don't have an account?
<label htmlFor="flip">Signup now</label>
</div>
</div>
</div>
</div>
</form>
</div>
</>
);
}
export default Profil;
.error{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

I think you need to console res.data.errors before you add if condition. There might be the chance you are putting conditions on the wrong properties which you are not getting in return as a response.
axios({
method: "post",
url: `${process.env.REACT_APP_API_URL}api/user/login`,
withCredentials: true,
data: {
email,
password,
},
})
.then((res) => {
console.log(res.data.errors, res.data); //check like this then put condition if you are getting res.data.errors property in response
if (res.data.errors) {
emailError.innerHTML = res.data.errors.email;
passwordError.innerHTML = res.data.errors.password;
} else {
window.location = "/";
}
})