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

Validação do Nome e SobreNome + refatoração

Montei tbm a validação do nome e sobrenome, e ficou funcional:

Mudei o objeto de erros:

const [errors, setErrors] = useState({
    cpf: { isValid: true, text: "" },
    name: { isValid: true, text: "" },
    lastName: { isValid: true, text: ""}
  });

No textfield do name, fiz a inclusão:

onBlur={(event) => {
          const validationName = isNameValid(name);
          setErrors({...errors,
            name: validationName,
          });
        }}
        error={!errors.name.isValid}
        helperText={errors.name.text}

No textfield do lastname, fiz a inclusão:

onBlur={(event) => {
          const validationLastName = isLastNameValid(lastName);
          setErrors({...errors,
            lastName: validationLastName,
          });
        }}
        error={!errors.lastName.isValid}
        helperText={errors.lastName.text}

e no App.js, inclui as funções para validação:

function isNameValid(name) {
  if (name.length < 3) {
    return { isValid: false, text: "This field must have at least 3 digits" };
  } else {
    return {isValid: true, text: ""}
  }
}

function isLastNameValid(lastName) {
  if (lastName.length < 2) {
    return { isValid: false, text: "This field must have at least 2 digits" };
  } else {
    return {isValid: true, text: ""}
  }
}

e passei por parametro para o formulário:

      <RegisterForm
        submitForm={onSubmitForm}
        isCPFValid={isCPFValid}
        isNameValid={isNameValid}
        isLastNameValid={isLastNameValid}
      />

Funcionando belezinha... mas, gostaria de refatorar pra não ter essa repetição de código no onBlur.... pensei em montar algo do tipo:

  const validation = (field, func) => {
    const fieldValidation = func(field);
    setErrors({...errors,
      field: fieldValidation,
    });
  }

e no onBlur do name por exemplo:

onBlur={validation(name, isNameValid)}

Mas ae recebo um erro do tipo "Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."

Não consegui achar alguma solução ou uma melhor abordagem pra essa tentativa... podem me dar uma ajuda?! Obrigado!

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta
solução!

Depois de batalhar um pouco, e pedir uma ajudinha, cheguei a essa solução:

Função que chama as validações:

const validation = (field, func) => {
    const fieldValidation = func(field.value);
    setErrors({ ...errors, [field.id]: fieldValidation });
  };

onBlur do Nome:

onBlur={(event) => {
          validation(event.target, isNameValid);
        }}

Alguma sugestao?!