I am using React and have built an email form. I currently have this class: <div className="msg">Message has been sent</div> but only want it to appear when the message has successfully sent. So only when the following resolves as status: true. How can I target this using only React/CSS?
.post('/api/email', values)
.then((res) => {
console.log("Server responded")
setValues({
name: "",
email: "",
message: "",
status: true
})
.catch(err => {
console.log(err);
window.alert("Email not sent")
});```
if your status varible named status then
<div className="msg" style={{display: status ? "block" : "none"}}>Message has been sent</div>
That's it.
And I suggest that you should add following code.
.catch(err => {
setValues({
name: "",
email: "",
message: "",
status: false
})
console.log(err);
window.alert("Email not sent")
});```
Wrapping the div between curly brackets, and add a condition && should do the work:
{values.status && <div className="msg">Message has been sent</div>}