Estoy usando Formik para las validaciones del formulario, y estoy intentando hacer una comparación de una fecha escogida mediante un input type date y un método creado por mí que devuelve la fecha actual como un string, y no entiendo por qué cuando se ejecuta la validación react lanza el error Uncaught Error: Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
Aquí ejecuto la validación:
const birthdateValidation = (birthdate)=>{
try {
if (!birthdate)
throw 'Required';
if (birthdate.toString() >= GetCurrentDateString())
throw 'Birthdate is not valid';
return {};
} catch (error) {
return {birthdate: error};
}
}
Aquí creo el método GetCurrentDateString():
const GetCurrentDateString = ()=>{
let day = date.getDate();
if (day < 10)
day = '0' + day.toString();
let month = date.getMonth() + 1;
if (month < 10)
month = '0' + month.toString();
let year = date.getFullYear();
return `${year}-${month}-${day}`;
}
export {GetCurrentDateString}
El método birthdateValidation es llamado por:
const validateNewAccount = ({firstName, lastName, birthdate, id, phoneNumber, email, password, samePassword}) =>{
let validate = {}
validate = {...validate, ...firstNameValidation(firstName)};
validate = {...validate, ...lastNameValidation(lastName)};
validate = {...validate, ...birthdateValidation(birthdate)}; // <- AQUÍ ESTÁ LA LLAMADA AL MÉTODO
validate = {...validate, ...idValidation(id)};
validate = {...validate, ...phoneNumberValidation(phoneNumber)};
validate = {...validate, ...emailValidation(email)};
validate = {...validate, ...passwordValidation(password)};
validate = {...validate, ...isSamePasswordValidation(password, samePassword)}
return validate;
}
Y validateNewAccount se llama aquí:
const { handleChange, handleSubmit, errors, touched, handleBlur } = useFormik({
initialValues: {
firstName: "",
lastName: "",
birthdate: "",
phoneNumber: "",
id: "",
email: "",
password: "",
samePassword: ""
},
onSubmit: values=>{
console.log(values);
},
validate: (values)=>{
const errors = validateNewAccount(values); // <- AQUÍ SE LLAMA AL MÉTODO
return errors;
}
});
Aquí estoy creando mi componente input type date el cual está dentro de un form:
<div>
<input type="date" name="birthdate" key="birthdate" onChange={handleChange} onBlur={handleBlur} placeholder="Birthdate" />
{touched.birthdate && errors.birthdate && <span>{errors.birthdate}</span>}
</div>