Breaking News: Grepper is joining You.com. Read the official announcement!

How to make a show or hide password toggle button in React

Anthony Michael answered on October 21, 2022 Popularity 6/10 Helpfulness 4/10

answer How to make a show or hide password toggle button in React

How to make a show or hide password toggle button in React

Comment

// 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>
  );
}

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: button hide javascript show toggle

Link to this answer
Share Copy Link

Contributed on Oct 21 2022

Anthony Michael

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

How to make a show or hide password toggle button in React

Contents

More Related Answers

How to make a show or hide password toggle button in React

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.