0

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?

1 respuesta 1

0

El problema en este caso es que estás tratando de renderizar el componente CenteredModal dentro del submitHandler del componente Register, lo cual no es posible.

Para mostrar el modal, debes establecer la variable modalShow en true cuando se cumpla la condición en el submitHandler. Luego, puedes renderizar el CenteredModal debajo del formulario de registro, pero fuera del submitHandler, como parte del retorno de la función Register.

const Register = () => {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [user, setUser] = useState("")
    const [modalShow, setModalShow] = useState(false);

    const navigate = useNavigate()

    const submitHandler = e => {
        e.preventDefault()

        const regexEmail =
            /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

        if (email === '' || password === '') {
            setModalShow(true);
        }
    }

    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="formBasicEmail">
                            <Form.Label>E-Mail</Form.Label>
                            <Form.Control type="email" placeholder="Ingresa tu Email" value={email} onChange={(e) => setEmail(e.target.value)} />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="formBasicPassword">
                            <Form.Label>Contraseña</Form.Label>
                            <Form.Control type="password" placeholder="Elegi una Contraseña" value={password} onChange={(e) => setPassword(e.target.value)} />
                        </Form.Group>
                        <div style={{ display: 'flex', justifyContent: "end", marginTop: "25px" }}>
                            <Button variant="dark" type="submit">
                                Registrarse
                            </Button>
                        </div>
                    </Form>
                </div>
            </div>
            <CenteredModal
                onHide={() => setModalShow(false)}
                show={modalShow} head="Error"
                title="Faltan Datos"
                description="Las campos no pueden estar vacios"
            />
        </>
    )
}

export default Register

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.