How to hide/unhide password Material uI - reactjs

Question

I have a Login in my App and I would like to have the option to hide and unhide the password.
This is my TextField:
<TextField
className={classes.textf}
variant="standard"
placeholder="password"
onChange={(password) => setPassword(password)}
/>

Answer 1

The TextField component has a type prop, you can set it to either "text" or "password" to show/hide the value.
const [showPassword, setShowPassword] = useState(false);
// ...
<TextField
type={showPassword ? "text" : "password"}
placeholder="password"
/>
<button onClick={() => setShowPassword(s => !s)}>Toggle visibility</button>

Answer 2

This might resolve your issue,
import * as React from 'react';
import IconButton from '#mui/material/IconButton';
import FilledInput from '#mui/material/FilledInput';
import InputLabel from '#mui/material/InputLabel';
import InputAdornment from '#mui/material/InputAdornment';
import FormControl from '#mui/material/FormControl';
import Visibility from '#mui/icons-material/Visibility';
import VisibilityOff from '#mui/icons-material/VisibilityOff';
export default function InputAdornments() {
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 (
<div>
<FormControl sx={{ m: 1, width: '25ch' }} variant="filled">
<InputLabel
htmlFor="filled-adornment-
password">
Password
</InputLabel>
<FilledInput
id="filled-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}
edge="end">
{values.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</div>
);
}