LoginForm.js

import React, { Component } from 'react';
import axios from 'axios';
import FormErrors from './FormErrors';

export default class LoginForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
            remember: false,
            errors: [],
            busy: false,
            forgotPasswordUrl: '/password/reset'
        };

        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(event) {
        event.preventDefault();

        this.setState({
            errors: [],
            busy: true
        });

        axios.post('/login', { email: this.state.email, password: this.state.password })
            .then(response => {
                this.setState({
                    busy: false
                });
            })
            .catch(error => {
                let errors;

                if (typeof error.response.data === 'object') {
                    errors = _.flatten(_.toArray(error.response.data));
                } else {
                    errors = ['Something went wrong. Please try again.'];
                }

                this.setState({
                    errors: errors,
                    busy: false
                });
            });
    }

    render() {
        const { state } = this;

        return (
            <form className="form-horizontal" role="form" onSubmit={this.onSubmit}>
                {state.errors.length > 0 &&
                    <FormErrors errors={ state.errors } />
                }

                <div className="form-group">
                    <label className="col-md-4 control-label">E-Mail Address</label>

                    <div className="col-md-6">
                        <input type="email" className="form-control" value={ state.email } onChange={ e => this.setState({ email: e.target.value }) } required />
                    </div>
                </div>

                <div className="form-group">
                    <label className="col-md-4 control-label">Password</label>

                    <div className="col-md-6">
                        <input type="password" className="form-control" value={ state.password } onChange={ e => this.setState({ password: e.target.value }) } required />
                    </div>
                </div>

                <div className="form-group">
                    <div className="col-md-6 col-md-offset-4">
                        <div className="checkbox">
                            <label>
                                <input type="checkbox" value={ state.remember } onChange={ e => this.setState({ remember: e.target.checked }) } /> Remember Me
                            </label>
                        </div>
                    </div>
                </div>

                <div className="form-group">
                    <div className="col-md-8 col-md-offset-4">
                        <button type="submit" className="btn btn-primary" disabled={ state.busy }>
                            Login
                        </button>

                        <a className="btn btn-link" href={ state.forgotPasswordUrl }>
                            Forgot Your Password?
                        </a>
                    </div>
                </div>
            </form>
        );
    }
}