React.Js - FormControl doesn't update my value - reactjs

Question

I am currently working on the Login side of my react app and I am facing a problem with the update of my state data from the input.
I have this component:
import React from 'react'
import { login } from '../../api/Authentication'
import { setStore } from '../../webapp/storage'
import { Button, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';
export default class LoginPage extends React.Component {
constructor(props){
super(props);
this.state={
email:'',
password:''
}
}
handleSubmit(event) {
if (this.state.email == '' || this.state.password == '') {
if (this.state.email == '') {
this.badInfosAlert('Email field empty')
} else if (this.state.password == '') {
this.badInfosAlert('Password field empty')
}
return
}
console.log('-----------------------')
console.log(this.state.email)
console.log(this.state.password)
var user = {
email: this.state.email,
password: this.state.password
}
console.log(JSON.stringify(user))
console.log('-----------------------')
login(user).then(result => {
if (result != null && result.status == 200) {
setStore('token', result.json.user.token)
} else {
this.badInfosAlert(result.json.error)
}
}).catch(this.badInfosAlert('An error happend'));
}
badInfosAlert(message) {
console.log(message);
alert(message);
}
render() {
return (
<div className='col-lg-12'>
<Form>
<FormGroup controlId="formHorizontalEmail">
<ControlLabel>Email </ControlLabel>
<FormControl type="username" onChange = {(event,newValue) => this.setState({email:newValue})} placeholder="Email" />
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<ControlLabel>Password </ControlLabel>
<FormControl type="password" onChange = {(event,newValue) => this.setState({password:newValue})} placeholder="Password" />
</FormGroup>
<Button onClick={(event) => this.handleSubmit(event)}>Login</Button>
</Form>
</div>
)
}
}
The thing is, every time I clic submit, my state email/password is null, even if the fields are filled, why so?
I am still super new with JavaScript (not just react) so please explain your answer as much as you can :)
Thanks !

Answer 1

As you can see in the Documentation of react-bootstrap forms you'll get the newValue from your event object given to your function. So your code should look like this:
<FormControl type="username" onChange = {(event) => this.setState({email: event.target.value })} placeholder="Email" />
and do the same with your other input and everything should work fine. As far as I know, the FormControls from react-bootstrap won't give you a second parameter 'newValue'.

Answer 2

Use it like this
<FormControl type="username" onChange = {(event) => this.setState({email:event.target.value})} placeholder="Email" />
Now, it should work. Basically the value attached to input box is
available in event.target.value.