title: React : How to make password characters visible when typing each character and hide(*) after few time interval in react?
body: <p>I want my password field behavior as shown in this image</p>
  
  <p><a href="https://i.stack.imgur.com/2csj9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2csj9.png" alt="enter image description here"></a></p>
  
  <p>I found few solutions using jQuery and tried to convert it to react but It does not behave same with react as there is a setState which delays setting value. here is my code with react which is not behaving consistant.</p>
  
  <pre><code>    import React from "react";
      import ReactDOM from "react-dom";
  
  // Example JS object used for CSS styling
  const styles = {
    facebookBtn: {
      backgroundColor: "rgb(51, 89, 157)"
    },
    form: {
      textAlign: "center"
    }
  };
  
  export class Login extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        userName: "",
        password: "",
        passHidden: ""
      };
    }
    handleOnSubmit = e =&gt; {
      e.preventDefault();
      console.log("Submitted!");
    };
  
    onUserNameChange = e =&gt; {
      const value = e.target.value;
      this.setState({
        userName: value
      });
    };
    onHiddenPasswordChange = e =&gt; {};
  
    onPasswordChange = e =&gt; {
      const passwordValue = e.target.value;
      const hiddenPassValue = this.state.passHidden;
  
      let showLength = 1;
      let hideAll = setTimeout(() =&gt; {}, 0);
  
      let offset = passwordValue.length - hiddenPassValue.length;
  
      if (offset &gt; 0) {
        this.setState({
          passHidden:
            hiddenPassValue +
            passwordValue.substring(
              hiddenPassValue.length,
              hiddenPassValue.length + offset
            )
        });
      } else if (offset &lt; 0) {
        this.setState({
          passHidden: hiddenPassValue.substring(
            0,
            hiddenPassValue.length + offset
          )
        });
      }
  
      // Change the visible string
      if (passwordValue.length &gt; showLength) {
        this.setState({
          password:
            passwordValue
              .substring(0, passwordValue.length - showLength)
              .replace(/./g, "•") +
            passwordValue.substring(
              passwordValue.length - showLength,
              passwordValue.length
            )
        });
      }
  
      // Set the timer
      clearTimeout(hideAll);
      hideAll = setTimeout(() =&gt; {
        this.setState({
          password: passwordValue.replace(/./g, "•")
        });
      }, 1000);
        };
  
        render() {
           return (
        &lt;form style={styles.form} onSubmit={this.handleOnSubmit}&gt;
          &lt;h4&gt;Welcome Back!&lt;/h4&gt;
          &lt;div className="form-group row"&gt;
            &lt;input
              className="input"
              value={this.state.userName}
              onChange={this.onUserNameChange}
              type="text"
              placeholder="Email"
            /&gt;
          &lt;/div&gt;
          &lt;div className="form-group row"&gt;
            &lt;input
              className="input"
              value={this.state.password}
              onChange={this.onPasswordChange}
              type="text"
              placeholder="Password"
            /&gt;
          &lt;/div&gt;
  
          &lt;div className="form-group row"&gt;
            &lt;input
              className="input"
              value={this.state.passHidden}
              onChange={this.onHiddenPasswordChange}
              type="text"
              placeholder="Password"
            /&gt;
          &lt;/div&gt;
          &lt;div className="form-group row"&gt;
            &lt;button className="btn" type="submit"&gt;
              Log In
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      );
        }
      }
  
       class Form extends React.Component {
        render() {
          const { children, title } = this.props;
          return (
        &lt;div className="col-md-6 mx-auto"&gt;
          &lt;header&gt;
            &lt;h1&gt;{title}&lt;/h1&gt;
          &lt;/header&gt;
          {children}
        &lt;/div&gt;
      );
        }
      }
  
      ReactDOM.render(&lt;Form children={&lt;Login /&gt;} /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p><a href="https://stackoverflow.com/questions/37186309/make-password-textbox-value-visible-after-each-character-input">This is the solution link with jQuery</a></p>
  
  <p>Help will be much appreciated.</p>