Add alert upon form submission in reactjs - reactjs

Question

I am having the hardest time trying to get an alert to pop up after clicking on a button. I have been working on it for quite a while but can't seem to figure out where I am wrong. As per the code below, everything works fine, but the Alert will not show up. Any suggestions or advice would be greatly appreciated.
import React, {useState} from 'react';
import { Redirect } from 'react-router-dom'
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
import NavBar from "./NavBar";
import Footer from "./Footer";
import emailjs from 'emailjs-com';
import{ init } from 'emailjs-com';
function Contact() {
const [alertVisibility , setAlertVisibility ] = useState(false)
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('hidden', 'hidden', e.target, 'hidden')
.then((result) => {
setAlertVisibility(true);
if (setAlertVisibility === true ) {
return(
<button class="closebtn">
Great, your message has been sent.</button>
)
}
});
e.target.reset();
};
return (
<div>
<NavBar />
<br />
<br />
<br />
<br />
<br />
<MDBContainer>
<MDBRow className = "formcontainer">
<MDBCol md="6">
<form onSubmit={sendEmail}>
<p className="h4 text-center mb-4">Fill in the information below to contact me!</p>
<br />
<label htmlFor="defaultFormContactNameEx" className="grey-text" > Your name </label>
<input required type="text" id="defaultFormContactNameEx" className="form-control" name="user_name" />
<br />
<label htmlFor="defaultFormContactEmailEx" className="grey-text"> Your email </label>
<input required type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>
<br />
<label htmlFor="defaultFormContactSubjectEx" className="grey-text"> Subject</label>
<input required type="text" id="defaultFormContactSubjectEx" className="form-control" name="user_subject" />
<br />
<label htmlFor="defaultFormContactMessageEx" className="grey-text"> Your message </label>
<textarea required type="text" id="defaultFormContactMessageEx" className="form-control" rows="7" name="message"/>
<div className="text-center mt-4">
<MDBBtn color="warning" outline type="submit">
Send
<MDBIcon far icon="paper-plane" className="ml-2" />
</MDBBtn>
</div>
</form>
</MDBCol>
</MDBRow>
</MDBContainer>
<br />
<br />
<Footer />
</div>
);
};
export default Contact;

Answer 1

You are updating alertVisibility with the useState function, so your check should be for
if (alertVisibility === true) {...

Answer 2

You can use
SweetAlert2
import React, {useState} from 'react';
import { Redirect } from 'react-router-dom'
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';
import NavBar from "./NavBar";
import Footer from "./Footer";
import emailjs from 'emailjs-com';
import{ init } from 'emailjs-com';
import Swal from 'sweetalert2';
function Contact() {
const form = useRef();
const sendEmail = (e) => {
e.preventDefault();
emailjs
.sendForm(
EMAILJS_SERVICE_ID,
EMAILJS_TEMPLATE_ID,
form.current,
EMAILJS_PUBLIC_KEY
)
.then(
(result) => {
Swal.fire({
icon:"success",
title:`<h5 style='color:green'>Message Sent Successfully</h5>`,
confirmButtonColor: 'green',
})
},
(error) => {
Swal.fire({
icon:"error",
title:`<h5 style='color:red'>Ooops, something went wrong</h5>`,
confirmButtonColor: 'red',
})
}
);
e.target.reset()
};
return(
<div>
</div>
)
}
export default Contact;