Below is my Model (popup) code to send user email address to backend service. I have rendered this Model component in my Login Component. I am not able to submit this form. I don't know what i am missing here but my other forms are working fine. My Yup validations are working fine but when i click on "send" button , its not going inside onSubmit handler even if the field is validated.
import React from 'react'; import { Formik, Field, Form, ErrorMessage } from 'formik'; import * as Yup from 'yup'; import { errorMessage } from '../../utility/error-messages'; import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap'; const TextFieldComponent = (props) => { return ( <div className="formGroup"> {props.touched && props.touched[props.name] && props.errors && props.errors[props.name] !== undefined ? ( <ErrorMessage name={props.name} render={(msg) => <label className="errorMessage">{msg}</label>} /> ) : ( <label htmlFor={props.name}>{props.label}</label> )} <Field name={props.name} type="text" className={ props.touched && props.touched[props.name] && props.errors && props.errors[props.name] !== undefined ? 'formControl error ' : 'formControl' } onBlur={props.handleBlur} onChange={props.handleChange} /> </div> ); }; const setSchema = Yup.object({ email: Yup.string() .email(errorMessage.emailValidation) .required(errorMessage.emailRequired), }); export const ForgetPasswordModal = ({ show = false, onClose = () => {} }) => { debugger; return ( <> <Formik initialValues={{ email: '', }} validationSchema={setSchema} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); }} > {({ isSubmitting, errors, touched, handleChange, handleBlur }) => { return ( <> <Form> <Modal className="forgetPassPopup resetPassword" isOpen={show} backdrop={'static'} centered fade > <ModalBody> <h3>Reset password</h3> <p> Enter the email. </p> <div className="formGroup"> <TextFieldComponent name="email" label="email" errors={errors} touched={touched} handleBlur={handleBlur} handleChange={handleChange} /> </div> </ModalBody> <ModalFooter> <Button className="btn btnSecondary" onClick={() => onClose(false)} > Cancel </Button> <Button type="submit" disabled={isSubmitting} className="btn btnPrimary" > Send </Button> </ModalFooter> </Modal> </Form> </> ); }} </Formik> </> ); }; 
