0

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>

1 respuesta 1

0

El método GetCurrentDateString no tiene la variable data inicializada.

const GetCurrentDateString = ()=>{
  const date = new Date();
  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}`;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.