Show hide multiple password in react js

Question

I'm currently learning React js. My code work when it has one show hide password. But when i have more than one, i have struggle. This code work, because it has just one.

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>
);
}

In codesandbox i have 3 input type password, and each input have show hide password. Can you help me to achieved that ? and explain to me why thats work ? . I'm sorry for my bad English. Thank you

Answer 1

You may create a component that controls hide or show behavior. For example, you can create a generic component for isolated show hide behavior. You pass the input name, and it creates a sub-component for you.

export default function ShowHidePassword({ name }) {
  const [isVisible, setVisible] = useState(false);

  const toggle = () => {
    setVisible(!isVisible);
  };

  return (
    <div className="form-group">
      <input type={!isVisible ? "password" : "text"} name={name} required />
      <span className="icon" onClick={toggle}>
        {isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
      </span>
    </div>
  );
}

usage:

<div>
  <ShowHidePassword name="name" />
  <ShowHidePassword name="password" />
</div>