How to add show password button in react

We all know that implementing a new function and features to website is important and one of the feature is show password button in Login Page. 

This button is an important feature in your signup/signin page, it increases functionality of your page a bit more. 

However implementing it in javascript can be a bit complicated. Luckily in react there is a hook called useState it can make your task much easier.

Imports Used:

import React, { useState } from "react";
import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";

In my input tag i am using  <AiOutlineEye /> and <AiOutlineEyeInvisible/> icons from react-icons, So make sure to install react icons npm package to work with react icons. 

Working

<label htmlFor="password" className="..."> Password </label>
<input
    minLength={5}
    type={${passType}}
    name="..."
    id="..." 
    className="..." />

<span className="flex">
    {!showpassword && (
       <div onClick={showPass}>
       <AiOutlineEye size={20} />
       </div>
    )}
    {showpassword && (
       <div onClick={hidePass}>
       <AiOutlineEyeInvisible size={20} />
       </div>
    )}
<span/> 
 

Using UseState variable passtype we can toggle input tags type when the show or hide buttons are clicked, when show button is clicked it changes showpassword = true and passType = "text" and when hide button is clicked it changes showpassword = false and passType = "password" 

Passtype variable is fed to the input type to toggle when the buttons are clicked. 

const [passType, setPassType] = useState("password");
const [showpassword, setShowpassword] = useState(false);
const showPass = () => {
    setShowpassword(true);
    setPassType("text");
};
const hidePass = () => {
    setShowpassword(false);
    setPassType("password");
};

When showpassword = false, Invisible Eye(<AiOutlinEyeInvisible/>)  appears and when showpassword is false, Eye(<AiOutlinEye/>) appears .