how to perform crud operation in react with firebase database - reactjs

Question

I am trying on trial and error basis. I tried to insert username and password in the database using reactjs by event handling, but whenever I enter the username and the password both fields get the same value. For example, if I put 'ABC' as username and 123 as password then the username and password will get same value 123 in the database.
1.trying to insert data using event handling.
class Login extends Component{
ref = firebase.firestore().collection('login');
state = {
username: '',
password: ''
};
handleChange = (event) => {
const state = this.state
state.username = event.target.value;
state.password=event.target.value;
//console.log(state[event.target.username]);
//console.log(state[event.target.password]);
this.setState({username:state.username,
password:state.password });
console.log(state.username);
console.log(state.password);
}
onSubmit = (event) => {
event.preventDefault();
const { username,password } = this.state;
this.ref.add({
username,
password
}).then((docRef) => {
this.setState({
username: '',
password:''
});
this.props.history.push("/")
})
.catch((error) => {
console.error("Error adding document: ", error);
});
}
render()
{
return(
<form onSubmit={this.onSubmit}>
<div className="container mt-5 w-50">
<div className="form-group">
<label for= "user name" className="">User Name:</label>
<input type="text" name="userName" placeholder="UserName" className="form-control w-50" onChange={this.handleChange.bind(this)}/><br/>
<label for="password" className="">Password:</label>
<input type="password" name="password" placeholder="password" className="form-control w-50" onChange={this.handleChange.bind(this)}/><br/>
<button name="Login" className="btn btn-success w-50 mb-3">Login</button><br/>
{/* Don't Have an Account? SignUp */}
<Link to="/signup">Don't Have an Account? SignUp</Link>
</div>
</div>
</form>
);
}
}
export default Login;
username and password should get their actual values.

Answer 1

I believe this is because you are setting the state of both to the same value (event.target.value) in your event handler. You're also mutating state which is not a good thing to do in any situation.
in your handleChange function you are changing username AND password state values to the value of event.target.value which will happen when onChange fires in whichever input you are using handleChange as a listener.
change your handleChange function to this:
handleChange = event => {
let {name, value} = event.target;
this.setState({
[name]: value
});
}
by using {[name]: value} when the event fires in an input with name="password" the password value in your component's state will update
Your render function is a bit confusing but I am going to assume you're rendering a form with labels for username and password...
then in your input within your form (which I can't see in your markdown above, but I'm assuming is in the Login component):
<input name="username" value={this.state.username} onChange={this.handleChange} />
<input name="password" value={this.state.password} onChange={this.handleChange} />