30-seconds-of-code/snippets/PasswordRevealer.md

title, tags, expertise, author, cover, firstSeen, lastUpdated

title	tags	expertise	author	cover	firstSeen	lastUpdated
Show/hide password toggle	components,input,state	beginner	chalarangelo	blog_images/thread.jpg	2018-10-18T20:04:22+03:00	2020-11-25T20:46:35+02:00

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'));