Cannot flush updates when React is already rendering - Sweet - reactjs

Question

I get the following error when rendering a SweetAlert.. not sure how to solve?
index.js:1451 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
in n (at LoginOverlay/index.js:248)
in div (at LoginOverlay/index.js:82)
in Formik (at LoginOverlay/index.js:66)
in LoginOverlay (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at Routes.js:270)
in div (created by ForwardRef(MotionComponent))
in ForwardRef(MotionComponent) (at Routes.js:263)
in Switch (at Routes.js:262)
in PresentationLayout (at Routes.js:261)
in Route (at Routes.js:260)
in Switch (at Routes.js:258)
in Suspense (at Routes.js:257)
in PresenceChild (created by AnimatePresence)
Code:
const LoginOverlay = (props) => {
const history = useHistory();
const { magic, login, clearError } = props;
// useEffect(() => {
// if (magic.entity?.loggedIn && localStorage.getItem('did_token')) {
// //history.push('/business/home');
// }
// }, [magic.loading, magic.showInfoDialog]);
return (
<Formik
initialValues={{
email: ''
}}
validationSchema={yup.object().shape({
email: yup
.string()
.email('Must be valid email address')
.min(3)
.required('Email is required')
})}
onSubmit={async (values, actions) => {
console.log(values, props);
props.login(values.email);
}}>
{(props) => (
<div className="app-wrapper min-vh-100 bg-white">
<div className="hero-wrapper w-100 bg-composed-wrapper bg-midnight-bloom min-vh-100">
<div className="flex-grow-1 w-100 d-flex align-items-center">
<div
className="bg-composed-wrapper--image opacity-2"
style={{ backgroundImage: 'url(' + hero6 + ')' }}
/>
<div className="bg-composed-wrapper--bg bg-second opacity-7" />
<div className="bg-composed-wrapper--content p-3 p-md-5">
<Container>
<Card className="rounded-sm modal-content p-3 bg-white-10">
<Card className="rounded-sm overflow-hidden shadow-xxl font-size-sm p-3 p-sm-0">
<Row className="no-gutters">
<Col
lg="6"
className="d-flex align-items-center justify-content-center flex-column">
<Form onSubmit={props.handleSubmit}>
<div className="divider-v divider-v-lg d-none d-lg-block" />
<div className="text-center mt-4">
<h1 className="font-size-xxl mb-1 font-weight-bold">
Login
</h1>
<br />
<p className="mb-0 text-black-50">
Enter you email below to sign up or sign in to
your account
</p>
<br />
<div className="mb-0 text-black-50">
<div className="form-group mb-6">
<Input
type="text"
{...props.getFieldProps('email')}
placeholder="Email"
invalid={
props.errors.email && props.touched.email
}
valid={
!props.errors.email && props.touched.email
}
/>
<FormFeedback>
{props.errors.email}
</FormFeedback>
</div>
<div className="text-center py-4">
<Button
type="submit"
disabled={
magic.loading || props.isSubmitting
}
className="font-weight-bold w-50 my-2"
color="second">
Submit
</Button>
{/* <LaddaButton
type="submit"
className="m-2 btn btn-second"
loading={(magic.loading || props.isSubmitting)}
onClick={(e) => {
e.preventDefault();
props.submitForm();
}}
data-style={EXPAND_LEFT}>
Submit
</LaddaButton> */}
</div>
</div>
</div>
</Form>
</Col>
<Col
lg="6"
className="d-flex align-items-center justify-content-center flex-column bg-secondary">
<div className="p-3">
<div className="p-4">
<div className="d-block d-xl-flex">
<div className="mt-0 mt-xl-1 mb-md-2 mb-lg-0">
<FontAwesomeIcon
icon={['far', 'heart']}
className="font-size-xl text-first"
/>
</div>
<div className="pl-0 pl-xl-3">
<div className="text-black font-weight-bold font-size-lg mb-1">
Have we anything for here?
</div>
<p className="mb-0 text-black-50">
Have we anything for here?
</p>
</div>
</div>
</div>
<div className="p-4">
<div className="d-block d-xl-flex">
<div className="mt-0 mt-xl-1 mb-md-2 mb-lg-0">
<FontAwesomeIcon
icon={['far', 'lightbulb']}
className="font-size-xl text-first"
/>
</div>
<div className="pl-0 pl-xl-3">
<div className="text-black font-weight-bold font-size-lg mb-1">
Have we anything for here?
</div>
<p className="mb-0 text-black-50">
Have we anything for here?
</p>
</div>
</div>
</div>
<div className="p-4">
<div className="d-block d-xl-flex">
<div className="mt-0 mt-xl-1 mb-md-2 mb-lg-0">
<FontAwesomeIcon
icon={['far', 'user']}
className="font-size-xl text-first"
/>
</div>
<div className="pl-0 pl-xl-3">
<div className="text-black font-weight-bold font-size-lg mb-1">
Have we anything for here?
</div>
<p className="mb-0 text-black-50">
Have we anything for here?
</p>
</div>
</div>
</div>
</div>
</Col>
</Row>
</Card>
</Card>
</Container>
</div>
</div>
<div className="hero-footer w-100 pb-4">
<Container>
<div className="py-3 d-block d-lg-flex font-size-xs justify-content-between">
<div className="text-center d-block mb-3 mb-md-0 text-white">
XXXXX 2021
</div>
<Nav className="nav-transparent justify-content-center">
<NavItem>
<NavLinkStrap
className="text-white-50"
href="#/"
onClick={(e) => e.preventDefault()}>
Privacy Policy
</NavLinkStrap>
</NavItem>
<NavItem>
<NavLinkStrap
className="text-white-50"
href="#/"
onClick={(e) => e.preventDefault()}>
Terms of Service
</NavLinkStrap>
</NavItem>
</Nav>
</div>
</Container>
</div>
</div>
<SweetAlert
title="Check your email"
show={!magic.entity?.loggedIn && magic.showInfoDialog}
html={`We emailed a magic link to ${props.values.email}</br>Click the link in your email and then return to this tab to log in or sign up.</br>`}
type="info"
showCancelButton={false}
showConfirmButton={false}
/>
<SweetAlert
title="Error"
show={!magic.entity?.loggedIn && magic.errorMessage}
html={magic.errorMessage}
type="error"
showCancelButton={false}
showConfirmButton={true}
onConfirm={() => clearError()}
/>
{
(localStorage.getItem("did_token") || magic.entity?.loggedIn ) && <Redirect to="/business/home" />
}
</div>
)}
</Formik>

Answer 1

Please check for any other alerts that is dependent. It happens when you are trying to access multiple alerts