Reactでパスワードの表示と非表示を切り替える

reveal password と検索するとたくさんでてきます。ポイントはinputタグのtypeフィールドを変数によって制御するだけ。

import React, { useState } from 'react';

const Login = () => {

  // パスワード表示制御ようのstate
  const [isRevealPassword, setIsRevealPassword] = useState(false);
  
  return (
    <input 
      placeholder="Password"
      type={isRevealPassword ? 'text' : 'password'}
      name="password"
    />
  )
}

おなじみの目のアイコンもつけます。font-awesomeをインストールしておいてください。僕はこれを入れています。

https://www.npmjs.com/package/@fortawesome/fontawesome-free

Login.jsxとLogin.module.scssは同じフォルダに入っている前提です。

Login/Login.jsx

import React, { useState } from 'react';
import classes from './Login.module.scss'; // 後述。ここではcraを使っていることを前提にモジュールcssでcssのスタイルをつける。

const Login = () => {

  // パスワード表示制御ようのstate
  const [isRevealPassword, setIsRevealPassword] = useState(false);
  
  const togglePassword = () => {
    setIsRevealPassword((prevState) => !prevState);
  }
  
  return (<div>
    <input 
      placeholder="Password"
      type={isRevealPassword ? 'text' : 'password'}
      name="password"
    />
    {/*  spanタグにrole="presentation"をつけないと、onClickつけたらeslintの内容によっては怒られます。 */ }
    <span
	onClick={togglePassword}
        role="presentation"
	className={classes.PasswordReveal}
    >
      {isRevealPassword ? (
	 <i className="fas fa-eye" />
      ) : (
	 <i className="fas fa-eye-slash" />
      )}
     </span>
  </div>)
}

Login/Login.module.scss

// 自分で調節してね
.PasswordReveal {
  left: auto;
  position: absolute;
  right: 10px;
  top: 10px;
}