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;