React Password Show/Hide – JavaScript Exercise #22

Overview

In this exercise, you will create a React Password Show/Hide component that allows a user to toggle the visibility of a password input field between a visible and hidden state.

Instructions for React Password Show/Hide

1. Create a new React component named PasswordInput that includes a password input field and a toggle button.
2. Add state to the component to keep track of whether the password input is currently visible or hidden.
3. Use CSS to style the password input field and the toggle button.
4. Click the toggle button to update the component’s state and toggle the visibility of the password input field.
5. When the password input field is visible, the user should be able to see the password they are typing. Obscure the password when you hide it.
6. Test your component to ensure that it works as expected.

Bonus Requirements

1. Add a “forgot password” link to the component that redirects the user to a password reset page.
2. The system allows users to choose whether the password input is hidden or visible by default.
3. Use a custom icon for the toggle button.

Please take time to complete the exercise before viewing the final output. I believe that active learning is the most effective way to learn and grow as a developer.

Get your tools ready and begin the React Password Show/Hide exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for React Password Show/Hide exercise

import React, { useState } from 'react';
import './PasswordInput.css';

function PasswordInput() {
  const [passwordVisible, setPasswordVisible] = useState(false);
  const togglePasswordVisibility = () => {
    setPasswordVisible(!passwordVisible);
  };

  return (
    <div className="password-input">
      <label>Password</label>
      <div className="password-input-container">
        <input
          type={passwordVisible ? 'text' : 'password'}
          placeholder="Enter password"
        />
        <button onClick={togglePasswordVisibility}>
          {passwordVisible ? 'Hide' : 'Show'}
        </button>
      </div>
      <a href="/forgot-password">Forgot Password?</a>
    </div>
  );
}

export default PasswordInput;

.password-input {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.password-input label {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.password-input-container {
  display: flex;
  align-items: center;
}

.password-input-container input {
  flex: 1;
  height: 40px;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 16px;
  padding: 5px;
}

.password-input-container button {
  margin-left: 10px;
  background: none;
  border: none;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.password-input-container button:hover {
  text-decoration: underline;
}

.password-input a {
  font-size: 14px;
  margin-top: 10px;
  color: #333;
  text-align: right;
}

.password-input a:hover {
  text-decoration: underline;
}

import React from 'react';
import PasswordInput from './PasswordInput';

function App() {
  return (
    <div className="App">
      <PasswordInput />
    </div>
  );
}

export default App;

The component enables users to show or hide their password input to verify correctness without retyping.

It’s important to keep in mind that while the React Password Show/Hide component can be useful in certain situations, it may not be appropriate for all use cases. In particular, it’s important to consider security implications when using a password input field that can be toggled between visible and hidden states. For example, if the password input field is visible when the user is typing in their password, someone looking over their shoulder may be able to see the password. As such, it’s important to use this component judiciously and in a way that is appropriate for the specific use case.

Thanks for taking this JavaScript exercise!

I hope you found this exercise helpful and enjoyable, and that it has deepened your understanding of React development. Keep practising and experimenting with React, and you’ll be well on your way to becoming a skilled React developer!

Boost your React skills with 25 React JavaScript Practice Exercises with Solutions hands-on challenges to master components, hooks, and more!