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

Here is resuable password hide show component.

import React from 'react'
import { useState,useEffect } from 'react';

const PasswordShowInput = ({name,disabled,value,setValue}) => {
    const [show, setShow] = useState(false);

    const onShow = (e)=>{
        e.preventDefault();
        setShow(!show)
    }

    useEffect(() => {
      setShow(false)
      return () => {
        setShow(false)
      };
    }, [disabled]);


  return (
 <div className='showpassword'>
        <input disabled={disabled}  name={name} type={show && !disabled?"text":"password"} value={value} onChange={e=>setValue(e.target.value)}/>
        {!disabled?<p onClick={onShow}><i class={!show?"fa-solid fa-eye":"fa-solid  fa-eye-slash"}></i></p>:null}
    </div>
  )
}

export default PasswordShowInput

usage

<PasswordShowInput disabled={false} name="password" value={password} setValue={setPassword}/>

Answer 2

when you use one state for more than one thing, state changes will effect on all of elements that use the state. best way is create a reusable input component and import it anywhere and As much as you want. on this way every changes will happen just inside that component and wont effect on others component

dont forget to pass ...props to your input if you want access to the input onChange,name and ....

  export const PasswordInput = (props) => {
  const [hide, setHide] = useState(false);

  const toggle = () => {
    setHide((prev) => !prev);
  };

  return (
    <div>
      <input type={!isVisible ? "password" : "text"} {...props} required />

      <i className="icon" onClick={toggle}>
        {hide ? <EyeVisible /> : <EyeInvisible />}
      </i>
    </div>
  );
}

usage:

<div>
<PasswordInput />
<PasswordInput />
<PasswordInput />
</div>

now every toggle will only effect on the clicked input and there is no side effect and re render

Answer 3

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>