Form.Control type password in React-Bootstrap always renders an default password that i can't remove

Question

I am doing the login page and i realized i cannot set the default values of the Form.Control type password input!!!

class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: 'thisIsMyDefaultPassword',
      isLoading: false,
      redirectToReferrer: false
    };
  }


  handleChange = name => event => {
    let update = {};
    update[`${name}`] = event.target.value;
    this.setState(update);
  }

  handleFocus = () => {
    this.setState({ password: '' });
  }

  handleSubmit = () => event => {
    let data = {
      email: this.state.email,
      password: this.state.password
    }
    this.props.login(data)
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
    let { currentUser } = this.props;
    console.log('currentUser ', currentUser, 'prevProps.currentUser ', prevProps.currentUser );
    if (JSON.stringify(prevProps.currentUser) !== JSON.stringify(currentUser)) {
      console.log('currentUser !=');
      if (currentUser._id) {
        this.setState({
          redirectToReferrer: true
        })
      }
    }
  }

  render() {
    let { email, password , isLoading, redirectToReferrer } = this.state;
console.log('password when rendered', password);
    if (redirectToReferrer) {
        return <Redirect to={'/'} />;
    }

    return (
      <div className="loginWrapper">
        <div className="loginContainer">
          <Form>
            <Form.Group controlId="formGroupEmail">
              <Form.Label>Email Address</Form.Label>
              <Form.Control
                type="email"
                value={email}
                onChange={this.handleChange('email')}
                placeholder="Enter Email"
              />
            </Form.Group>
            <Form.Group controlId="formGroupPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control
                type="password"
                defaultValue={this.state.password}
                onFocus={this.handleFocus}
                onChange={this.handleChange('password')}
                placeholder="Password"
              />
            </Form.Group>
          </Form>
          <Button
            variant="primary"
            size="lg"
            disabled={isLoading}
            onClick={this.handleSubmit()}
            block
          >
            {isLoading ? 'Loading…' : 'LOGIN'}
          </Button>
        </div>
      </div>
    );
  }
}

i expect the default values rendered to be controlled by the default state of my component. But it just don't work. I have tried defaultValue / value / and defaultValue with value. but there is still this default number being rendered in the password input .. The above are my latest codes i am still facing the problem although i crack it with onFocus. If there's any better improvement to my codes please comment below too. An Advance thank you to all commenters. really appreciate the help of this community.

Below are the console logs for console.log('password when rendered', password) IT shows that react-bootstrap javascript is clearning the password and setting as 0346:

password when rendered thisIsMyDefaultPassword
Login.js:51 password when rendered 
Login.js:51 password when rendered 0346

Thus concluding that the defaultValue for the type password does not work ?

Answer 1

There are two type of valued components(TextField, Checkbox, etc.):

1. Controlled - The component whose value is controlled by the code implementation. In this type of component you have to set value prop of the component with the value source and handle it's onChange to get the value and update in the future source.

   <TextField value={this.state.password} onChange={(event) => this.setState({ password: event.target.value })} />

2. Un-controlled - The component which has a default value and that value can changed without any trigger/handling in the component code. These components have a prop 'defaultValue' populated with the initial value you want to assign.

   <TextField defaultValue={this.state.password} />

You can't use both value and defaultValue on same component.

In your case You have to remove defaultValue prop, as you need a controlled component to make its value persist.

Answer 2

The value props is too much here, if you get rid of it, you can change the input. Additionally, you always provide the string "password" to your onChange handler as a value. This might not be what you want to do, but instead using the actual password the user is entering.

In your render method:

<p>Current password: {this.state.password}</p>
<Form>
  <Form.Group controlId="formGroupPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control
      type="password"
      defaultValue={this.state.password}
      onChange={this.handleChange('password')}
      placeholder="Password"
    />
  </Form.Group>
</Form>

And your handleChange function could look like:

handleChange = name => event => {
  this.setState({ password: event.target.value });
};

Example: https://codesandbox.io/s/8x8zw28nv2

Answer 3

You have the same value for defaultValue and value , seems like it doesn't make sense because if value has a value, that value will be rendered. Try matching defaultValue to another value or just remove defaultValue . Does your onChange work? Seems like not. Are you implemented your handleChange ? Because you are using controlled inputs. Try this:

  handleChange = e => {
    this.setState({
        password: e.target.value
    })
  }

  <Form>
    <Form.Group controlId="formGroupPassword">
      <Form.Label>Password</Form.Label>
      <Form.Control
            type="password"
            value={password}
            onChange={this.handleChange}
            placeholder="Password"
       />
    </Form.Group>
  </Form>