Show and Hide Password using React Js

Hello Developer, In this tutorial, you will learn How to show and hide password with an eye icon using react js. This tutorial is explained with some simple steps that are very easy to understand. So, you should not leave any single step otherwise you may miss some useful points.

If you need a feature that works as –  By default, a close icon and the password will be invisible like a bullets symbol. When you click the close eye icon then the password will be visible in the form of original text input and the eye icon will be changed to open eye. In this way, you can toggle password by clicking the eye icon again & again.

By default, We declare a password input filed with type= “password”. When you begin to enter your password. It will change each password character into a bullet symbol. But most of the users need a visible password in an original format. So, you can give them a password visibility feature.

How to Toggle Show-Hide Password in React Js

In this tutorial, I have created functionality to show and hide password using functional components. Once, you learn it, you can easily create it yourself using the class component.

Learn Also –

Add and Remove Input Fields Dynamically with React Js

How to Display Form Data in Table using React Js

Add and Delete Table Rows Dynamically using React Js

Create a Simple React Todo App

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
  |__public/
  |    |__images/
  |__src/
  |   |
  |  show-and-hide-password
  |       |__ShowAndHidePassword.js
  |__App.js
  |__index.js

I have used bootstrap 4 to create a responsive weather app. So, You should install it in your react app.

For more information, you can learn How to use Bootstrap in React Js

1. Create ShowAndHidePassword Compoent

File Name – ShowAndHidePassword.js

import { useState } from "react/cjs/react.development";

function ShowAndHidePassword(){

    const [passwordType, setPasswordType] = useState("password");
    const [passwordInput, setPasswordInput] = useState("");
    const handlePasswordChange =(evnt)=>{
        setPasswordInput(evnt.target.value);
    }
    const togglePassword =()=>{
      if(passwordType==="password")
      {
       setPasswordType("text")
       return;
      }
      setPasswordType("password")
    }
    return(

        <div className="row">
            <div className="col-sm-3">
                <div className="input-group my-4 mx-4">
                    <input type={passwordType} onChange={handlePasswordChange} value={passwordInput} name="password" class="form-control" placeholder="Password" />
                    <div className="input-group-btn">
                     <button className="btn btn-outline-primary" onClick={togglePassword}>
                     { passwordType==="password"? <i className="bi bi-eye-slash"></i> :<i className="bi bi-eye"></i> }
                     </button>
                    </div>
                </div>
                
            </div>
      </div>
      
    )

}
export default ShowAndHidePassword;

2. Render ShowAndHidePassword Compoent

To render ShowAndHidePassword component, you will have to import it in the App component and render it as <ShowAndHidePassword /> within the return() method.

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import ShowAndHidePassword from "./show-and-hide-password/ShowAndHidePassword";
function App() {
  render(){
  return (
    <ShowAndHidePassword />
  );
  }
}
export default App;

3. Run App to Show and Hide Password

First of all, you have to run the following command to run the app.

npm start

Now, you can show and Hide password yourself  by opening the following URL in your web browser

http://localhost:3000