Breaking News: Grepper is joining You.com. Read the official announcement!

how to hide password in react

Liz answered on January 2, 2023 Popularity 9/10 Helpfulness 2/10

answer how to hide password in react

related how to show and hide password in react js

how to hide password in react

Comment

//write this in App.js

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import InputLabel from "@material-ui/core/InputLabel";
import Visibility from "@material-ui/icons/Visibility";
import InputAdornment from "@material-ui/core/InputAdornment";
import VisibilityOff from "@material-ui/icons/VisibilityOff";
import Input from "@material-ui/core/Input";

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

const handleClickShowPassword = () => {
	setValues({ ...values, showPassword: !values.showPassword });
};

const handleMouseDownPassword = (event) => {
	event.preventDefault();
};

const handlePasswordChange = (prop) => (event) => {
	setValues({ ...values, [prop]: event.target.value });
};

return (
	<div
	style={{
		marginLeft: "30%",
	}}
	>
	<h4>How to show and hide password in ReactJS?</h4>
	<InputLabel htmlFor="standard-adornment-password">
		Enter your Password
	</InputLabel>
	<Input
		type={values.showPassword ? "text" : "password"}
		onChange={handlePasswordChange("password")}
		value={values.password}
		endAdornment={
		<InputAdornment position="end">
			<IconButton
			onClick={handleClickShowPassword}
			onMouseDown={handleMouseDownPassword}
			>
			{values.showPassword ? <Visibility /> : <VisibilityOff />}
			</IconButton>
		</InputAdornment>
		}
	/>
	</div>
);
};

export default App;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: hide javascript

Link to this answer
Share Copy Link

Contributed on Jan 27 2023

Liz

0 Answers Avg Quality 2/10

Closely Related Answers

how to show and hide password in react js

Comment

export default function App() {
  const [changePassword, setChangePassword] = useState(true);
  const changeIcon = changePassword === true ? false : true;

  return (
  <div className="wrapper-login">
     <div className="wrapper-form">
        <h2>Welcome Back!</h2>
        <form>
           <label>Email</label>
           <div>
              <input
                 type="email"
                 name="email"
                 required
              />
           </div>
           <label>Password</label>
           <div className="form-group">
              <input
                 type={changePassword ? "password" : "text"}
                 name="password"
                 required
              />
              <span className="icon"
                 onClick={() => {
                    setChangePassword(changeIcon);
                 }}
              >
                 {changeIcon ? <EyeOutlined /> : <EyeInvisibleOutlined />}
              </span>
           </div>
        </form>
     </div>
  </div>
);
}

Popularity 9/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: hide

Link to this answer
Share Copy Link

Contributed on Jan 02 2023

Md Kayda Azam

0 Answers Avg Quality 2/10

how to hide password in react

Contents

More Related Answers

how to hide password in react

Closely Related Answers

how to show and hide password in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.