Siguiendo la documentacion de bootstrap quiero mostrar un Modal, que advierta al usuario que en caso que se quiera registrar con campos vacios. Mi componente Modal esta armado asi, mi intencion es que le llegue por props lo que quiero decir, para poder reciclar el componente a lo largo de toda la app solo cambiando titulos, header y descripcion.
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
function CenteredModal(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{props.head}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>{props.title}</h4>
<p>
{props.description}
</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
export default CenteredModal
Aca muestro como pretendo usarlo en el componente de registro, el usuario intenta registrarse con campos vacios; se entiende que entra al primer if, ya que un campo o el otro son verdaderos, ejecuta la porcion de codigo del if siguiente donde se encuentra que modalShow es true, ya que el useState asi lo declara cuando inicializo el estado; por lo tando deberia ejecturse la porcion siguiente y levantar el componente con las props que le paso... No logro ver que estoy haciendo mal
const Register = () => {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [user, setUser] = useState("")
const [modalShow, setModalShow] = useState(true);
const navigate = useNavigate()
const submitHandler = e => {
e.preventDefault()
const regexEmail =
/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
if (email === '' || password === '') {
if (modalShow) {
return (
<CenteredModal
onHide={() => setModalShow(false)}
show={modalShow} head="Error"
title="Faltan Datos"
description="Las campos no pueden estar vacios"
/>
);
}
}
return (
<>
{token && <Navigate to="/novedades" replace />}
<div className="registertitle">
Registrate
</div>
<div style={{ marginTop: "10px", textAlign: "center" }} ><a href="/login" style={{ color: "black" }}>¿Ya tenes una cuenta? Inicia sesión</a></div>
<div className="loginregister">
<div className="loginbox">
<Form onSubmit={submitHandler}>
<Form.Group className="mb-2" controlId="formBasicUser">
<Form.Label>Usuario</Form.Label>
<Form.Control type="user" placeholder="Ingresa tu usuario" value={user} onChange={(e) => setUser(e.target.value)} />
<Form.Text className="text-muted">
Nunca compartiremos tus datos con nadie
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword" value={email} onChange={(e) => setEmail(e.target.value)}>
<Form.Label>E-Mail</Form.Label>
<Form.Control type="password" placeholder="Ingresa tu Email" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword" value={password} onChange={(e) => setPassword(e.target.value)}>
<Form.Label>Contraseña</Form.Label>
<Form.Control type="password" placeholder="Elegi una Contraseña" />
</Form.Group>
<div style={{ display: 'flex', justifyContent: "end", marginTop: "25px" }}>
<Button variant="dark" type="submit">
Registrarse
</Button>
</div>
</Form>
</div>
</div>
</>
)
}
export default Register
Sin embargo no hace NADA, donde me estoy equivocando?