I have this JS code that shows 2 input boxes that asks for a password: 1) Password 2) Confirm Password. However, the clickShowPassword() is only connected to Password.
[Output] [1]: https://i.stack.imgur.com/IZoa3.png
Here’s my whole js file that is connected to an react application.
JavaScript
x
41
41
1
import React from "react";
2
3
function ShowHidePassword(){
4
const [values, setValues] = React.useState({
5
password: "",
6
passwordConf: "",
7
showPassword: true,
8
});
9
const clickShowPassword = (event) => {
10
setValues({ values, showPassword: !values.showPassword });
11
event.preventDefault();
12
};
13
14
const passwordChange = (prop) => (event) => { setValues({ values, [prop]: event.target.value }); };
15
const mouseDownPassword = (event) => { event.preventDefault(); };
16
17
return (
18
<div>
19
<input
20
type={values.showPassword ? "text" : "password"}
21
onChange={passwordChange("password")}
22
value={values.password} id="signup-password"
23
placeholder="PASSWORD"
24
/>
25
<input
26
type={values.showPassword ? "text" : "passwordConf"}
27
onChange={passwordChange("passwordConf")}
28
value={values.passwordConf} id="signup-password-confirm"
29
placeholder="CONFIRM PASSWORD"
30
/>
31
<br/>
32
<button className="hide-password2" onClick={clickShowPassword} onMouseDown={mouseDownPassword}>
33
{values.showPassword===false? <i className="bi bi-eye-slash"></i> :<i className="bi bi-eye"></i> } Show Password
34
</button>
35
</div>
36
);
37
38
};
39
40
export default ShowHidePassword;
41
Advertisement
Answer
In your second input you used passwordConf as an input type, I think this happened because u copied the first input and batch-replaced all “password” words with “passwordConf”, happens to the best of us 🙂