Add A React-bootstrap Alert To HandleSubmit In Formik
Answer :
Use state and conditional rendering. Instead of returning a component set state to a variable, in your render use conditional rendering to check if the value is true.
handleSubmit = (formState, { resetForm }) => { // Now, you're getting form state here! const payload = { ...formState, role: formState.role.value, createdAt: firebase.firestore.FieldValue.serverTimestamp() }; console.log('formvalues', payload); fsDB .collection('register') .add(payload) .then(docRef => { resetForm(initialValues); }) .then(e => this.setState({ alert: true })) .catch(error => { console.error('Error adding document: ', error); }); }; In your render
render() { ... return( .... {this.state.alert && <AlertDismissible />} ... ) } Example Demo
Complete form
import React from 'react'; import { Link } from 'react-router-dom'; import { Formik, Form, Field, ErrorMessage, withFormik } from 'formik'; import * as Yup from 'yup'; import Select from 'react-select'; import { fsDB, firebase, settings } from '../../firebase'; import Temporarynav from '../navigation/Temporarynav.jsx'; import Demo from '../landing/Demo.jsx'; import Footer from '../footer/Footer.jsx'; import './preregister/Form.css'; import AlertDismissible from '../auth/preregister/Alert'; import { Badge, Button, Col, ComponentClass, Feedback, FormControl, FormGroup, Table, Row, Container } from 'react-bootstrap'; import Alert from 'react-bootstrap/Alert'; const style1 = { width: '60%', margin: 'auto' }; const style2 = { paddingTop: '2em' }; const style3 = { marginRight: '2em' }; const initialValues = { firstName: '', lastName: '', email: '', role: '', consent: false, createdAt: '' }; class PreregForm extends React.Component { constructor(props) { super(props); // the flag isFormDone will control where you will show the Alert component this.state = { showAlert: false }; } handleSubmit = (formState, { resetForm }) => { // Now, you're getting form state here! const payload = { ...formState, role: formState.role.value, createdAt: firebase.firestore.FieldValue.serverTimestamp() }; console.log('formvalues', payload); fsDB .collection('preregistrations') .add(payload) .then(docRef => { resetForm(initialValues); }) .then(e => this.setState({ showAlert: true })) .catch(error => { console.error('Error adding document: ', error); }); }; render() { const options = [ { value: 'academic', label: 'Academic Researcher' }, { value: 'student', label: 'Student (inc PhD)' } ]; // const {isFormDone} = this.state; return ( <div> {!this.state.showAlert ? ( <div> <Formik initialValues={initialValues} validationSchema={Yup.object().shape({ firstName: Yup.string().required('First Name is required'), lastName: Yup.string().required('Last Name is required'), email: Yup.string() .email('Email is invalid') .required('Email is required'), role: Yup.string() .nullable() .required( 'It will help us get started if we know a little about your background' ), consent: Yup.boolean().oneOf( [true], 'You must accept the Terms of Use and Privacy Policy' ) })} onSubmit={this.handleSubmit} render={({ errors, status, touched, setFieldValue, setFieldTouched, handleSubmit, isSubmitting, dirty, values }) => { return ( <div> <Temporarynav /> <Form style={style1}> <h1 style={style2}>Get Started</h1> <p> We're almost ready to open this up to the research community. By registering now, you'll be first in line when the doors open. </p> <div className="form-group"> <label htmlFor="firstName">First Name</label> <Field name="firstName" type="text" className={ 'form-control' + (errors.firstName && touched.firstName ? ' is-invalid' : '') } /> <ErrorMessage name="firstName" component="div" className="invalid-feedback" /> </div> <div className="form-group"> <label htmlFor="lastName">Last Name</label> <Field name="lastName" type="text" className={ 'form-control' + (errors.lastName && touched.lastName ? ' is-invalid' : '') } /> <ErrorMessage name="lastName" component="div" className="invalid-feedback" /> </div> <div className="form-group"> <label htmlFor="email">Email</label> <Field name="email" type="text" placeholder="Please use your work email address" className={ 'form-control' + (errors.email && touched.email ? ' is-invalid' : '') } /> <ErrorMessage name="email" component="div" className="invalid-feedback" /> </div> <div className="form-group"> <label htmlFor="role"> Which role best describes yours? </label> <Select key={`my_unique_select_keyrole`} name="role" className={ 'react-select-container' + (errors.role && touched.role ? ' is-invalid' : '') } classNamePrefix="react-select" value={values.role} onChange={selectedOptions => { // Setting field value - name of the field and values chosen. setFieldValue('role', selectedOptions); }} onBlur={setFieldTouched} options={options} /> {errors.role && touched.role && ( <ErrorMessage name="role" component="div" className="invalid-feedback d-block" /> )} </div> <div className="form-group"> <div className="checkbox-wrapper"> <Field name="consent" type="checkbox" checked={values.consent} className={ 'checkbox' + (errors.consent && touched.consent ? ' is-invalid' : '') } /> <label htmlFor="consent" className="checkbox_label_wrapper" > You must accept the{' '} <Link className="links" to={'/Terms'}> Terms of Use </Link>{' '} and{' '} <Link className="links" to={'/Privacy'}> Privacy Policy </Link> </label> </div> {errors.consent && touched.consent && ( <ErrorMessage name="consent" component="div" className="invalid-feedback d-block" /> )} </div> <div className="form-group"> <Button variant="outline-primary" type="submit" style={style3} id="submitRegistration" onClick={handleSubmit} disabled={!dirty || isSubmitting} > Register </Button> </div> </Form> <Demo /> <Footer /> </div> ); }} /> </div> ) : ( <AlertDismissible /> )} </div> ); } } export default PreregForm;
Comments
Post a Comment