reactjspasswordscontrolled-component

Is there a way to hide value from input with password in React?

I have this code for input with type="password"

<input
  type="password"
  id="password"
  value={form.password}
  onChange={handlePasswordChange}
/>

It works, but I noticed, that in develeopers console "Elements"you can actually see value of password field:

<input type="password" class="form-control undefined" value="qwerty">

Is it ok, that it shows password like this? Is there a way to hide it? Should i use uncontrolled componenets instead of controlled?

Solution

  • type="password" only cosmetically hides the password. The input value is always accessible via JS (using it's .value property). So when someone opens DevTools, he or she will be able to get the password regardless.