Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Meu valido está sendo executado ao contrário

Não sei o que aconteceu, mas quando coloco o valido como estado padrão true, ele executa como se estivesse falso, e vice-versa, então tive que deixar o código assim, alguma sugestão? Tentei deixar só o essencial do código, onde eu acredito estar o erro, mas se precisarem dele completo eu anexo aqui.

    FormularioCadastro.jsx



const [erros,setErros] =  useState({cpf:{valido:false, texto:""}});

<TextField
                value={cpf}
                onChange={(event) => {
                    setCpf(event.target.value);
                }}

                onBlur={(event)=>{
                    const ehValido = validarCPF(cpf);
                    setErros({cpf:ehValido});
                }}

                error={erros.cpf.valido}
                helperText={erros.cpf.texto}
                id="CPF"
                label="CPF"
                variant="outlined"
                margin="normal"
                fullWidth />



        App.js


<FormularioCadastro aoEnviar={aoEnviarForm} validarCPF={validarCPF}/>


function validarCPF(cpf) {
  if(cpf.length !== 11){
    return {valido:true, texto:"CPF deve ter 11 dígitos"}
  }else{
    return {valido:false, texto:""}
  }
}
1 resposta
solução!

Olá Ronaldo,

A propriedade error do componente TextField realmente funciona de forma inversa ao que está sendo guardado, se você passa "true" para essa prop, significa que existe algum erro e por tanto ele vai exibir o componente com erro.

No seu caso você está guardando um boolean que diz quando a propriedade É VÁLIDA, ou seja, para que o error funcione da maneira esperada basta inverter o que você guardou, dessa forma: error={!erros.cpf.valido} //repare que coloquei um ! para inverter o valor

Dessa forma quando o cpf estiver válido, ele vai passar false para a propriedade de erro, e o componente será exibido normalmente. Caso esteja inválido, ele irá passar true para o error e o componente será exibido com erro!