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, F...