how to print error message from the inspect-network-preview for my Register page?

Question

I built a site in reactjs for a project to be submitted and I'm trying to get the message that I can see (I added in the picture) to be printed to the user. watch here fixed but now it says firebase at the start of each message, is there a way to delete it? "Firebase: Password should be at least 6 characters (auth/weak-password)."

this is the code of the page:

import React, { useState } from 'react';
import Add from "../img/AvatarAdd.png"
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import { auth, db, storage} from "../firebase";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { doc, setDoc } from "firebase/firestore"; 
import { useNavigate, Link } from 'react-router-dom';
import { errorMessage } from 'stream-chat-react/dist/components/AutoCompleteTextarea/utils';

const Register = () => {
  const [err, setErr] = useState(false);
  const navigate = useNavigate()

  const handleSubmit = async (e)=>{
    e.preventDefault();
    const displayName = e.target[0].value;
    const email = e.target[1].value;
    const password = e.target[2].value;
    const file = e.target[3].files[0];

    try{
      const res = await createUserWithEmailAndPassword(auth, email, password);
      
      const storageRef = ref(storage, displayName);
      const uploadTask = uploadBytesResumable(storageRef, file);

      // Register three observers
      uploadTask.on(
        (error) => {
          setErr(true);
        }, 
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then( async(downloadURL) => {
            await updateProfile(res.user, {
              displayName,
              photoURL: downloadURL,
            });
            await setDoc(doc(db, "users", res.user.uid), {
              uid: res.user.uid,
              displayName,
              email,
              photoURL: downloadURL,
            });

            await setDoc(doc(db, "userChats", res.user.uid), {})
            navigate("/");
            
          });
        }
      );
    } catch (err) {
      setErr(err);
    }
  };

  return (
    <div className='formContainer'>
        <div className='formWrapper'>
            <span className="logo">Trust Yoav</span>
            <span className="title">Register</span>
            <form onSubmit={handleSubmit}>   {/* my form to add user, need to add confirm password */}
                <input type="text" placeholder="display name"/>
                <input type="email" placeholder="email"/>
                <input type="password" placeholder="password"/> 
                <input style={{display:"none"}} type="file" id="file"/>
                <label htmlFor="file" >
                    <span>Add an avater:</span>
                    <img style={{ width: 32, cursor: 'pointer'}} src={Add} alt="" />
                </label>
                <button>Sign Up</button>
                {err && <span>{err.message}</span>}
            </form>
            <p>You do have an account? <Link to="/login">Login</Link></p>
        </div> 
    </div>
  );
};

export default Register;

I have tried to search the internet for information about it or try to access it in different forms but I have not been able to.

Answer 1

The catch must catch the error returned by the "createUserWithEmailAndPassword" function.

Where you have

} catch (err) {
 setErr(true);
}

replace with

} catch (err) {
 setErr(err);
}

And render the error message with

<div className='formContainer'>
        <div className='formWrapper'>
            <span className="logo">Trust Yoav</span>
            <span className="title">Register</span>
            <form onSubmit={handleSubmit}>   {/* my form to add user, need to add confirm password */}
                <input type="text" placeholder="display name"/>
                <input type="email" placeholder="email"/>
                <input type="password" placeholder="password"/> 
                <input style={{display:"none"}} type="file" id="file"/>
                <label htmlFor="file" >
                    <span>Add an avater:</span>
                    <img style={{ width: 32, cursor: 'pointer'}} src={Add} alt="" />
                </label>
                <button>Sign Up</button>
                {err && <span>{err.message}</span>}
            </form>
            <p>You do have an account? <Link to="/login">Login</Link></p>
        </div> 
    </div>