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!

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?!