onSubmit is not a function when using HandleSubmit Formik?-CodePudding

Somehow i managed to stop getting the 400 POST error on the Login and Register Components in my app, but now for some reason they shoot me the "Formik.tsx:824 Warning: An unhandled error was caught from submitForm() TypeError: onSubmit is not a function" problem when i click the submit button (they both pretty much have the same code, maybe that's not the best way to do it though)

Anyway, here's the Register Component (since at the very least i want that one to work to move on to the Login one and as i said they're pretty much the same)

import React from "react";
import { View, TextInput, TouchableOpacity,Text } from "react-native";
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import {createUsuario} from '../../CRUD';

const SignupSchema = Yup.object().shape({
    email: Yup.string().email('El email ingresado no es valido.').required('Por favor ingrese su email.'),
    contrasenia: Yup.string()
      .min(6, 'La contrasenia es muy corta.')
      .max(20, 'La contrasenia es demasiado larga.')
      .required('Por favor ingrese su contrasenia.')
  });

export default function RegisterForm () {
    return(
    <Formik initialValues={{
        email: '',
        contrasenia: ''
    }}
    validationSchema={SignupSchema}
    handleSubmit={(values=>(createUsuario()))}>
        {({values,errors,touched, handleChange, setFieldTouched, isValid, handleSubmit}) =>(
        <View>
            <TextInput 
            placeholder="Email" 
            value={values.email} 
            onChangeText={handleChange('email')}
            onBlur={()=> setFieldTouched('email')}/>
            {touched.email && errors.email && (
                <Text>{errors.email}</Text>
            )}
            <TextInput 
            placeholder="Contraseña" 
            value={values.contrasenia} 
            onChangeText={handleChange('contrasenia')}
            onBlur={()=> setFieldTouched('contrasenia')}
            secureTextEntry={true}/>      
            {touched.contrasenia && errors.contrasenia && (
                <Text>{errors.contrasenia}</Text>
            )}
            <TouchableOpacity disabled={!isValid} style={{backgroundColor: isValid? '#289D8C': '#808080'}} onPress={handleSubmit}>
                <Text>Registrate</Text>
                </TouchableOpacity>
                </View>
                )}
    </Formik>
    )
}

The CreateUsuario function which is on my CRUD.js file:

export async function createUsuario(db,email, contrasenia){
    await setDoc(doc(db, "Usuario"), {
        email: email,
        contrasenia: contrasenia
      }).then(()=> {
        console.log("Guardado exitosamente");
      }).catch((error)=>{
        console.log("Hubo fallos al guardar");
      })
}

PS: i know there are some asked questions that were answered with similar or the same issue as mine but i'm not really sure how to apply those solutions to my own code

It could be the ValidationSchema as i've read in some places though.

CodePudding user response：

Not sure exactly how or why this works, but i found something like this while looking up solutions, and tried it and it works! (even if the console throws an error that it failed to fetch)

const HandleSubmit= async values =>{
    const {email,contrasenia} = values;
    var body = {
      email: email,
      contrasenia: contrasenia
    };
    createUsuario(db,email, contrasenia);
  }

And then i replaced the HandleSubmit line for onSubmit!

onSubmit={HandleSubmit}>

CodePudding user response：

Replace handleSubmit={(values=>(createUsuario()))}> by handleSubmit={(values) => createUsuario(db,email, contrasenia))}>