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

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

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 2

There are two type of valued components(TextField, Checkbox, etc.):
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 })}
/>
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 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>