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.

More like this

  • Tag input field

    Renders a tag input field.

    React, Components · Nov 25, 2020

  • Toggle

    Renders a toggle component.

    React, Components · Nov 16, 2020

  • Stateful checkbox with multiple selection

    Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.

    React, Components · Oct 13, 2021