I want to place the eye marks for showing or hiding password in react.js-CodePudding

In the current code below, I can show or hide password in form now when I click the eye mark but If I press the eye mark while entering the password The password I entered is lost. How can keep password in form whether I click the eye mark or not.

const Login = () => {

  
  const [isRevealPassword, setIsRevealPassword] = useState(false);

  const togglePassword = () => {
    setIsRevealPassword((prevState) => !prevState);
  }

  return (
.
.
.
                    <input 
                    placeholder='Old Password' className='form-control update_password_form'
                    type={isRevealPassword ? 'text' : 'password'} {...register('password', { required: true })} />

                    <span
                        onClick={togglePassword}
                        role="presentation"
                        className="password_reveal"
                        >
                        {isRevealPassword ? 
                          <FontAwesomeIcon icon={faEye} />
                          : 
                          <FontAwesomeIcon icon={faEyeSlash} />
                        }
                    </span>

CodePudding user response：

This might help you.

 const togglePassword = () => {
        setIsRevealPassword(!isRevealPassword);
      }

 useEffect(() => {}, [isRevealPassword]);

CodePudding user response：

solved. the cause of the error for various reasons It was caused by creating three same input forms.