Estoy usando React y he creado un formulario de correo electrónico. Actualmente tengo esta clase: <div className="msg">Message has been sent</div> pero solo quiero que aparezca cuando el mensaje se haya enviado correctamente. Entonces, solo cuando lo siguiente se resuelve como estado: verdadero. ¿Cómo puedo orientar esto usando solo 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") });```si su variable de estado se llama estado, entonces
<div className="msg" style={{display: status ? "block" : "none"}}>Message has been sent</div>Eso es todo.
Y le sugiero que agregue el siguiente código.
.catch(err => { setValues({ name: "", email: "", message: "", status: false }) console.log(err); window.alert("Email not sent") });```Envolver el div entre corchetes y agregar una condition && debería hacer el trabajo:
{values.status && <div className="msg">Message has been sent</div>}