How to make a show or hide password toggle button in Reactjs?

Originally posted here!

To show or hide the password in the input field in Reactjs, the basic idea is to change the input tag's type attribute to text from password and vice versa on clicking the "Show password" button or an appropriate button of your own.

Step 1

First, let's make an input tag with password as the type of the input field.

// Input Password Component
export default function Password() {
  return (
    <div>
      <input type="password" />
    </div>
  );
}

Step 2

Initialize a boolean state called passwordShown to determine if the password in the input field should be shown using the useState() react hook.

Let's give the initial boolean state value as false as we do not want the input field to be shown when the user tries to enter the password at first. We only need them to be visible as the user clicks on the Show Password button.

It can be done like this,

// Import useState hook from react
import { useState } from "react";

// Input Password Component
export default function Password() {
  // Initialize a boolean state
  const [passwordShown, setPasswordShown] = useState(false);

  return (
    <div>
      <input type="password" />
    </div>
  );
}

Step 3

Now instead of hardcoding the password as the type of the input tag, we need to make it dynamic so that if the passwordShown boolean state is true it should show the password and if it is false it should not show the password.

It can be done like this,

// Import useState hook from react
import { useState } from "react";

// Input Password Component
export default function Password() {
  // Initialize a boolean state
  const [passwordShown, setPasswordShown] = useState(false);

  return (
    <div>
      <input type={passwordShown ? "text" : "password"} />
    </div>
  );
}

As you can see that in the type attribute we are first checking if the passwordShown boolean state is true or false and applying the attribute value according to it.

Step 4

Now let's make a Show Password button and attach an onClick handler to it so that when the user clicks the button it should show the password.

// Import useState hook from react
import { useState } from "react";

// Input Password Component
export default function Password() {
  // Initialize a boolean state
  const [passwordShown, setPasswordShown] = useState(false);

  // Password toggle handler
  const togglePassword = () => {
    // When the handler is invoked
    // inverse the boolean state of passwordShown
    setPasswordShown(!passwordShown);
  };

  return (
    <div>
      <input type={passwordShown ? "text" : "password"} />
      <button onClick={togglePassword}>Show Password</button>
    </div>
  );
}

Here we have made a handler called togglePassword so that when it is invoked it will just inverse the boolean state of passwordShown.

That's all! 😃. We have made a working Show/Hide password toggle.

See the above code in action in Codesandbox.

Feel free to share if you found this useful 😃.

---