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!