I'm trying to display the Alert message using Chakra Ui but it's not displaying. Please help.
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorMessage, errorCode);
<Alert status='error'>
<AlertIcon />
<AlertTitle>Error!</AlertTitle>
<AlertDescription>Email/ Password Did Not Matched.</AlertDescription>
</Alert>
});
Components like <Alert /> can't be added to the catch of a promise. You have to conditionally render the alert in the return statement of a component like so:
function LoginExample() {
const [showAlert, setShowAlert] = useState(false)
const handleLogin = (email, password) => {
loginUser(email, password)
.then((res) => /* handle success */)
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorMessage, errorCode);
setShowAlert(true)
})
}
return (
<>
{showAlert && (
<Alert status='error'>
<AlertIcon />
<AlertTitle>Error!</AlertTitle>
<AlertDescription>Email/ Password Did Not Matched.</AlertDescription>
</Alert>
)}
{/* rest of jsx */}
</>
)
}