RegisterCompany.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import debounce from 'throttle-debounce/debounce'
import axios from 'axios';

import SubmitButton from './SubmitButton'

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

    this.state = {
        company_name: '',
        company_name_valid: null,
        form_class: '',
        fetching: false
    }

    this.inputChange    = this.inputChange.bind(this);
    this.inputCheck     = debounce(650, this.inputCheck);
    this.submitRegister = this.submitRegister.bind(this);
  }

  nameLabel(){
    if (this.state.company_name_valid) {
      return (
        <div className="form-control-feedback">That Business name is available!</div>
      )
    }
    else if (this.state.company_name_valid === false) {
      return (
        <div className="form-control-feedback">That Business name has already been taken</div>
      )
    }
  }

  ifValidNameFields(){
    if (this.state.company_name_valid) {
      return (
        <div className="valid-name">
          <SubmitButton text="Register Business" className="btn btn-primary btn-block" submitting={this.state.fetching} clicked={this.submitRegister}></SubmitButton>
        </div>
      )
    }
  }

  inputChange(e){
    this.setState({company_name: e.target.value, company_name_valid: null, form_class: ''});
  }

  inputKeyUp(e){
    this.inputCheck(e.target.value);
  }

  inputCheck(){
    this.setState({company_name_valid: null, form_class: 'has-loading'});
    if(this.state.company_name !== ''){
      axios.get('businesses/'+this.state.company_name+'/check')
      .then(response => {
          return response.data;
      })
      .then(data => {
          this.setState({ company_name_valid: data.valid, fetching: false, form_class: data.valid ? 'has-success' : 'has-danger' });
      });
    }
  }

  submitRegister(){
    this.setState({fetching: true});
    axios.post('businesses', {
      name: this.state.company_name
    })
    .then(function (response) {
      window.location = '/business/account/'+response.data.slug;
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  render(){
    return( 
      <div>
        <div className="card">
          <div className="card-header">
            Register a Business
          </div>
          <div className="card-block">
            <div className={`form-group ${this.state.form_class}`}>
              <span className="input-icon">
                 <i className="fa fa-fw fa-id-badge"></i>
              </span>
              <input type="text" id="email" placeholder="Business Name" onChange={this.inputChange} onKeyUp={this.inputKeyUp.bind(this)} value={this.state.company_name} className={`form-control ${this.state.company_name_valid ? 'form-control-success' : (this.state.company_name_valid === false ? 'form-control-danger' : '') }`} />
              <span className="input-action">
                  <i className="fa fa-spinner fa-pulse"></i>
              </span>
              { this.nameLabel() }
            </div>
            { this.ifValidNameFields() }
          </div>
        </div>
      </div>
    );
  }
}

SubmitButton.js

import React, { Component } from 'react';

export default class SubmitButton extends Component {  
  constructor(props) {
    super(props);
  }
   render(){
    return( 
      <button className={`${ this.props.className } ${this.props.submitting ? 'loading' : ''}`} disabled={this.props.submitting} type="submit" value={`${ this.props.text }`} onClick={this.props.clicked}><span>{this.props.text}</span></button>
    );
  }
}