I have an error in addEventListener in ReactJs when I'm using tawilwind css password field

user_10506370 0
Viewed 36

I need to add this password filed to my React App but there is an eventListener error how can I solve that?

(Code Pen Link: https://codepen.io/huphtur/pen/OKJJQY)

HTML (This is the code HTML file)

<body class="bg-indigo-100">
<form class="p-4 max-w-md mx-auto bg-white border-t-8 border-indigo-700 mt-10 rounded">
  <h1 class="font-medium text-3xl text-center py-4 text-gray-800">Sign in to App</h1>
  <label class="font-medium block mb-1 mt-6 text-gray-700" for="username">
    Username or Email
  </label>
  <input class="appearance-none border-2 rounded w-full py-3 px-3 leading-tight border-gray-300 bg-gray-100 focus:outline-none focus:border-indigo-700 focus:bg-white text-gray-700 pr-16 font-mono" id="username" type="text" autocomplete="off" autofocus />

  <label class="font-medium block mb-1 mt-6 text-gray-700" for="password">
    Password
  </label>
  <div class="relative w-full">
    <div class="absolute inset-y-0 right-0 flex items-center px-2">
      <input class="hidden js-password-toggle" id="toggle" type="checkbox" />
      <label class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle">show</label>
    </div>
    <input class="appearance-none border-2 rounded w-full py-3 px-3 leading-tight border-gray-300 bg-gray-100 focus:outline-none focus:border-indigo-700 focus:bg-white text-gray-700 pr-16 font-mono js-password" id="password" type="password" autocomplete="off"
    />
  </div>

  <button class="w-full bg-indigo-700 hover:bg-indigo-900 text-white font-medium py-3 px-4 mt-10 rounded focus:outline-none focus:shadow-outline" type="button">
    Sign in
  </button>

</form>
</body>

Js This is the js code

const passwordToggle = document.querySelector('.js-password-toggle')

passwordToggle.addEventListener('change', function() {
  const password = document.querySelector('.js-password'),
    passwordLabel = document.querySelector('.js-password-label')

  if (password.type === 'password') {
    password.type = 'text'
    passwordLabel.innerHTML = 'hide'
  } else {
    password.type = 'password'
    passwordLabel.innerHTML = 'show'
  }

  password.focus()
})
event-listener reactjs javascript
1 Answers

Use your JS code when componentDidMount, for this you will need useEffect hook

example:

useEffect(() => {

  const passwordToggle = document.querySelector('.js-password-toggle')

  passwordToggle.addEventListener('change', function() {
    const password = document.querySelector('.js-password'),
      passwordLabel = document.querySelector('.js-password-label')

    if (password.type === 'password') {
      password.type = 'text'
      passwordLabel.innerHTML = 'hide'
    } else {
      password.type = 'password'
      passwordLabel.innerHTML = 'show'
    }

    password.focus()
  })

}, [])
user_178695710
Related