Here is the Model (popup) code I am using to send the user's email address to the backend service. The Model component is being rendered in my Login Component. However, I am facing an issue where I am unable to submit this form. Despite having working Yup validations, clicking on the "send" button does not trigger the onSubmit handler.
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>
</>
);
};