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

PasswordRevealer

Renders a password input field with a reveal button.

Class version

Initially set state.shown to false to ensure that the password is not shown by default. Create a method, toggleShown, which uses Component.prototype.setState to change the input's state from shown to hidden and vice versa, bind it to the component's context. In therender() method, use a<div> to wrap both the<input> and the <button> element that toggles the type of the input field. Finally, bind the <button>'s onClick event to the toggleShown method.

class PasswordRevealer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shown: false
    };
    this.toggleShown = this.toggleShown.bind(this);
  }

  toggleShown() {
    this.setState(state => ({ shown: !state.shown }));
  }

  render() {
    return (
      <div>
        <input
          type={this.state.shown ? 'text' : 'password'}
          value={this.props.value}
        />
        <button onClick={this.toggleShown}>Show/Hide</button>
      </div>
    );
  }
}

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

Function version

Initialize a state variable shown to denote whether or not the password is revealed. Set its initial value to false. In the render() method, return a <div> element wrapping the <input> element which holds the password and the <button> element which reveals or hides it. Bind the button's onClick event to the setShown function that switches the state variable shown's value from true to false and vice versa.

function PasswordRevealer() {
  const [shown, setShown] = useState(false);

  return (
    <div>
      <input type={shown ? 'text' : 'password'} />
      <button onClick={() => setShown(!shown)}>
        {shown ? 'Hide' : 'Show'}
      </button>
    </div>
  )
}

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