0

Resulta que estoy tratando de hacer un login usando el framework de css material ui en React. pero no se exactamente porque no funciona, me sale que tengo errores de sintaxis.

quiero que el imput de password tenga el icono de ver y ocultar la contraseña pero no he podido lograrlo.

la parte que me sale mal es const [values, setValues] = React.useState({password: '', showPassword: false,});

he intentado colocar el codigo en otros lugares y . pd: Soy nuevo en React

class Login extends React.Component{

    const [values, setValues] = React.useState({
        password: '',
        showPassword: false,
      });

    
      const handleChange = (prop) => (event) => {
        setValues({ ...values, [prop]: event.target.value });
      };
    
      const handleClickShowPassword = () => {
        setValues({ ...values, showPassword: !values.showPassword });
      };
    
      const handleMouseDownPassword = (event) => {
        event.preventDefault();
      };

    render(){
        return(
            <>
                <Container maxWidth="xl">
                    <div className='contenedor'>
                        <Grid item xs={12} sm={12} md={12} lg={6} xl={6} className='FormLogin'>
                            <Container>
                                <div className="logo-cito">
                                    <img src={logo} alt="LOGO CITOPLUS" width='200' />
                                </div>
                                <Typography variant="h4" color="primary" align="center" className="title-login">
                                    INICIAR SESION
                                </Typography>

                                <div className="inputs">
                                    <TextField className='inputs--user' id="input-with-icon-textfield"
                                        placeholder="Usuario" InputProps={{
                                        startAdornment: (
                                          <InputAdornment position="start">
                                            <AccountCircle color="primary"/>
                                          </InputAdornment>
                                        ),
                                      }} />
                                    <div>
                                        <FormControl >
                                            <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
                                            <Input id="standard-adornment-password" type={values.showPassword ? 'text'
                                                : 'password' } value={values.password}
                                                onChange={handleChange('password')} endAdornment={ <InputAdornment
                                                position="end">
                                            <IconButton aria-label="toggle password visibility"
                                                onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword}>
                                                {values.showPassword ?
                                                <Visibility /> :
                                                <VisibilityOff />}
                                            </IconButton>
                                            </InputAdornment>
                                            }
                                            />
                                        </FormControl>
                                    </div>
                                </div>
                            </Container>
                        </Grid>
                        <Grid item xs={12} sm={12} md={12} lg={6} xl={6} className='imagenLogin'>
                            <div>
                                <img src={imgprom} alt="Imagen" className="imgprom" />
                            </div>
                        </Grid>
                    </div>
                </Container>
            </>
        )
    }
}

export default Login;

1 respuesta 1

0

El problema es que estas utilizando useState, que es un hook de React, dentro de un componente con una clase. Según la documentacion de React no puedes usar hooks dentro de una clase. Como useState, useEffect etc. https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

Lo que puedes hacer es lo siguiente: Cambiar: class Login extends React.Component Por: const Login = () =>, O, function Login() y eliminar el metodo render()

const Login = () => {

    const [values, setValues] = React.useState({
        password: '',
        showPassword: false,
      });

    
      const handleChange = (prop) => (event) => {
        setValues({ ...values, [prop]: event.target.value });
      };
    
      const handleClickShowPassword = () => {
        setValues({ ...values, showPassword: !values.showPassword });
      };
    
      const handleMouseDownPassword = (event) => {
        event.preventDefault();
      };

        return(
            <>
                <Container maxWidth="xl">
                    <div className='contenedor'>
                        <Grid item xs={12} sm={12} md={12} lg={6} xl={6} className='FormLogin'>
                            <Container>
                                <div className="logo-cito">
                                    <img src={logo} alt="LOGO CITOPLUS" width='200' />
                                </div>
                                <Typography variant="h4" color="primary" align="center" className="title-login">
                                    INICIAR SESION
                                </Typography>

                                <div className="inputs">
                                    <TextField className='inputs--user' id="input-with-icon-textfield"
                                        placeholder="Usuario" InputProps={{
                                        startAdornment: (
                                          <InputAdornment position="start">
                                            <AccountCircle color="primary"/>
                                          </InputAdornment>
                                        ),
                                      }} />
                                    <div>
                                        <FormControl >
                                            <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
                                            <Input id="standard-adornment-password" type={values.showPassword ? 'text'
                                                : 'password' } value={values.password}
                                                onChange={handleChange('password')} endAdornment={ <InputAdornment
                                                position="end">
                                            <IconButton aria-label="toggle password visibility"
                                                onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword}>
                                                {values.showPassword ?
                                                <Visibility /> :
                                                <VisibilityOff />}
                                            </IconButton>
                                            </InputAdornment>
                                            }
                                            />
                                        </FormControl>
                                    </div>
                                </div>
                            </Container>
                        </Grid>
                        <Grid item xs={12} sm={12} md={12} lg={6} xl={6} className='imagenLogin'>
                            <div>
                                <img src={imgprom} alt="Imagen" className="imgprom" />
                            </div>
                        </Grid>
                    </div>
                </Container>
            </>
        )
}

export default Login;

O puedes dejar la clase. Pero haciendo otro componente que no sea una clase y utilice los hooks.

2
  • me funcionó, gracias por la aclaración. pero te hago otra consulta ya que sabes del tema. ya Login no quedaría siendo un componente sino una función? Commented el 13 ago. 2021 a las 22:42
  • Login seguiria siendo un componente.
    – Emanuek
    Commented el 13 ago. 2021 a las 23:00

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.