How to display auth errors with p tag

Question

how to display to user an auth error differently than with alert? For example: User will type a bad password, and a p tag will tell him, that he typed uncorrect password. Using Firebase v9 and React.

Some code:

    import React from 'react'
import { Link, useNavigate } from "react-router-dom";
import { UserAuth } from '../context/AuthContext';
import { useState } from 'react';



const Signin = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const { signIn } = UserAuth();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('')
    try{
        await signIn(email, password)
        navigate("/");
    } catch (e) {
      setError(e.message)
      alert(e.message)
      
    }
  }

  return (
    <div className='Signin'>Signin
    
    <form onSubmit={handleSubmit}>
         
            <label>Email</label>
            <input onChange={(e) => setEmail(e.target.value)} type="email"/>
            <label>password</label>
            <input onChange={(e) => setPassword(e.target.value)} type="password"/>
            <button type="submit">Sign up</button>
            <p className='errorp'></p>
            
        </form>
    
    </div>
  )
}

export default Signin

Thank you!

Answer 1

Something like {error && <p className='errorp'>{error}</p>}