ConfirmPassword doesnt show the error message in case the password doesn't match

Question

I am building an app with React my problem is about [![enter image description here][1]][1] register user. I tried to show a message error while the Confim password isn't the same as the password. The issues message from console.log is clearthe error come from my innerHTML. I didn't find the solution, that's why i ask help.

import axios from "axios";

const SignUpForm = () => {
 // 1- on met se qu'on se stock
 const [pseudo, setPseudo] = useState("");
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");
 const [controlPassword, setControlPassword] = useState("");

 // const [email, setEmail] = useState("");
 // const [paswword, setPassword] = useState("");
 // 2- la logique
 const handleRegister = async (e) => {
   e.preventDefault();
   const terms = document.querySelector(".terms"); //pk on mmet terms
   const termsError = document.querySelector(".terms.error");
   const pseudoError = document.querySelector("pseudo.error");
   const emailError = document.querySelector("email.error");
   const passwordError = document.querySelector("password.error");
   const passwordConfirmError = document.querySelector(
     "password-confirm.error"
   );

   if (password !== controlPassword || !terms.checked) {
     if (password !== controlPassword) {
       passwordConfirmError.innerHTML =
         "Les mots de passe ne correspondent pas";
     }
     if (!terms.checked) {
       termsError.innerHTML = "Veuillez valider les conditions générales";
     }
   }
 };
 // 3- renvoie le jsx (html)
 return (
   <form action="" onSubmit={handleRegister} id="sign-up-form">
     {/* Pseudo  */}
     <label htmlFor="pseudo">Pseudo</label>
     <br />
     <input
       type="text"
       name="pseudo"
       id="pseudo"
       // ce onChange ca permet de recuperer ce qui est taper dans input et d'incrementer la valeur dans Pseudo
       onChange={(e) => setPseudo(e.target.value)}
       value={pseudo}
     />
     <div className="pseudo error"></div>
     <br />
     {/* email  */}
     <label htmlFor="email">Email</label>
     <br />
     <input
       type="text"
       name="email"
       id="email"
       onChange={(e) => setEmail(e.target.value)}
       value={email}
     />
     <div className="email error"></div>
     <br />
     {/* mot de passe  */}
     <label htmlFor="password">Mot de passe</label>
     <br />
     <input
       type="password"
       name="password"
       id="password"
       onChange={(e) => setPassword(e.target.value)}
       value={password}
     />
     <div className="password error"></div>
     <br />
     {/* mot de passe  confirmation */}
     <label htmlFor="password-confirm">Confirmer mot de passe</label>
     <br />
     <input
       type="password"
       name="password-confirm"
       id="password-confirm"
       onChange={(e) => setControlPassword(e.target.value)}
       value={controlPassword}
     />
     <div className="password-confirm error"></div>
     <br />
     {/* terms checkbox */}
     <input type="checkbox" id="terms" />
     <label htmlFor="terms">
       J'accepte les{" "}
       <a href="/" target="_blnk" rel="noopener noreferer">
         conditions generales
       </a>
     </label>
     <div className="terms error"></div>
     <input type="submit" value="Valider l'inscription" />
   </form>
 );
};

export default SignUpForm;```


 [1]: https://i.sstatic.net/WkVGC.png

Answer 1

When selecting by class, you need to put a dot right before the class name. For example, in this code block you didn't do that:

const pseudoError = document.querySelector("pseudo.error");
const emailError = document.querySelector("email.error");
const passwordError = document.querySelector("password.error");
const passwordConfirmError = document.querySelector(
    "password-confirm.error"
);

This is how it should be:

const pseudoError = document.querySelector(".pseudo.error");
const emailError = document.querySelector(".email.error");
const passwordError = document.querySelector(".password.error");
const passwordConfirmError = document.querySelector(
    ".password-confirm.error"
);

By the way, I recommend using states instead of manipulating the DOM.