Hidden password only works in one input box

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.

import React from "react";

function ShowHidePassword(){
    const [values, setValues] = React.useState({
        password: "",
        passwordConf: "",
        showPassword: true,
    });
    const clickShowPassword = (event) => {
        setValues({ ...values, showPassword: !values.showPassword });
        event.preventDefault();
    };
    
    const passwordChange = (prop) => (event) => { setValues({ ...values, [prop]: event.target.value }); };
    const mouseDownPassword = (event) => { event.preventDefault(); };
    
    return (
        <div>
            <input
                type={values.showPassword ? "text" : "password"}
                onChange={passwordChange("password")}
                value={values.password} id="signup-password"
                placeholder="PASSWORD"
            />
            <input
                type={values.showPassword ? "text" : "passwordConf"}
                onChange={passwordChange("passwordConf")}
                value={values.passwordConf} id="signup-password-confirm"
                placeholder="CONFIRM PASSWORD"
            />
            <br/>
            <button className="hide-password2" onClick={clickShowPassword} onMouseDown={mouseDownPassword}>
                {values.showPassword===false? <i className="bi bi-eye-slash"></i> :<i className="bi bi-eye"></i> } Show Password
            </button>
        </div>
    );

};

export default ShowHidePassword;

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 🙂