React.Js - FormControl doesn't update my value

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'.