How to display the Chakra UI 'Alert'?

Question

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>
        });

Answer 1

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 */}
    </>
  )
}