Show/hide password toggle

React, Components, Input, State · Nov 25, 2020

Renders a password input field with a reveal button.

Use the useState() hook to create the shown state variable and set its value to false.
When the <button> is clicked, execute setShown, toggling the type of the <input> between 'text' and 'password'.

const PasswordRevealer = ({ value }) => {
  const [shown, setShown] = React.useState(false);
  return (
    <>
      <input type={shown ? 'text' : 'password'} value={value} />
      <button onClick={() => setShown(!shown)}>Show/Hide</button>
    </>
  );
};

ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

Show/hide password toggle

Written by Angelos Chalaris

More like this

Tag input field

Toggle

Stateful checkbox with multiple selection