Como validar um campo de confirmação de senha?? | React: Hooks, Contextos e boas práticas

Consegui terminar o curso, no entanto, estou tentando criar uma validação de senha para o campo senha!

Coloquei algo assim na parte de dados de usuário:

 <TextField
        value={confsenha}
        onChange={(event) => {
          setConfsenha(event.target.value);
          console.log(validaConfSenha + confsenha);
        }}
        onBlur={(event) => {
          setValidaSenha([senha, event.target.value]);
          console.log("Mandou: " + [senha, event.target.value]);
          validarCampos(event);
        }}
        error={!erros.validaConfSenha.valido}
        helperText={erros.validaConfSenha.texto}
        id="validaConfSenha"
        name="validaConfSenha"
        label="confirmar senha"
        type="text"
        required
        variant="outlined"
        margin="normal"
        fullWidth
   />

e a função que fiz foi algo assim no cadastro.js:

function validarMesmaSenha(confsenha, senha) {
  console.log("Valores: " + senha + " " + confsenha);
  if (senha === confsenha) return { valido: true, texto: "" };
  else return { valido: false, texto: "Senha não confere!" };
}

ou assim também:

function validarMesmaSenha(validaConfSenha) {
  const senha = validaConfSenha[0];
  const confsenha = validaConfSenha[1];
  console.log("Chegou: " + validaConfSenha);
  console.log(senha + " " + confsenha);
  if (senha === confsenha) return { valido: true, texto: "" };
  else return { valido: false, texto: "Senha não confere!" };
}

Não consigo fazer chegar os valores de senha e confsenha na função! Tentei de várias formas!! Alguém tentou fazer isso??

Oi Fernando, tudo bem?

Desculpe a demora em retornar.

Parabéns por ter concluído o curso de React e estar buscando aprimorar seus conhecimentos em validação de formulários. Vamos ver como validar um campo de confirmação de senha no React?

Pelo que pude entender do seu código, você criou um campo de confirmação de senha em que o usuário deve digitar a senha novamente para confirmar. Para validar se os valores digitados são iguais, você criou uma função chamada "validarMesmaSenha", que recebe como parâmetros a senha e a confirmação de senha.

Acredito que o problema esteja na passagem de valores para essa função. Na sua implementação atual, você está tentando passar os valores de senha e confirmação de senha por meio de um array, como mostrado no código abaixo:

setValidaSenha([senha, event.target.value]);
validarCampos(event);

Porém, na sua função "validarMesmaSenha", você está esperando receber dois parâmetros separados, e não um array:

function validarMesmaSenha(confsenha, senha) {
  // código da função
}

Para corrigir esse problema, sugiro que você passe os valores separadamente, como mostrado abaixo:

setValidaSenha(event.target.value);
validarCampos(event);

function validarMesmaSenha(confsenha, senha) {
  // código da função
}

// dentro da função validarCampos
const errosTemp = { ...erros };
errosTemp.validaConfSenha = validarMesmaSenha(confsenha, senha);
setErros(errosTemp);

Assim, no momento de chamar a função "validarMesmaSenha", você pode passar os valores de senha e confirmação de senha separadamente:

const errosTemp = { ...erros };
errosTemp.validaConfSenha = validarMesmaSenha(confsenha, senha);
setErros(errosTemp);

Outra sugestão é utilizar a função "useEffect" do React para validar a confirmação de senha sempre que houver uma mudança no valor dos campos de senha e confirmação de senha. Assim, a validação será atualizada automaticamente toda vez que um desses campos for alterado.

useEffect(() => {
  const errosTemp = { ...erros };
  errosTemp.validaConfSenha = validarMesmaSenha(confsenha, senha);
  setErros(errosTemp);
}, [senha, confsenha]);

Espero que essas sugestões ajudem a resolver o seu problema com a validação de senha no React.

Irei fechar o post pois o curso foi desativado.