import React, { Component } from 'react';

export default class AddProject extends Component {
  constructor() {
    super();

    this.state = {
      projectId: '',
    };

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

  submit(e) {
    e.preventDefault();
    this.props.onAdd(this.state.projectId);
  }

  render() {
    return (
      <form onSubmit={this.submit}>
        <div><label htmlFor="projectId">Project ID</label></div>
        <input
          id="projectId"
          onChange={e => this.setState({ projectId: e.target.value })}
          type="number"
          value={this.state.projectId}
        />
        <button type="submit">Add</button>
      </form>
    );
  }
}

import React, { Component } from 'react';

export default class AddProject extends Component {
  constructor() {
    super();

    this.state = {
      projectId: '',
    };

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

  submit(e) {
    e.preventDefault();
    this.props.onAdd(this.state.projectId);
  }

  render() {
    return (
      <form onSubmit={this.submit}>
        <div><label htmlFor="projectId">Project ID</label></div>
        <div className="input-group input-group-sm">
          <input
            id="projectId"
            onChange={e => this.setState({ projectId: e.target.value })}
            type="number"
            value={this.state.projectId}
            className="form-control"
          />
          <div className="input-group-btn">
            <button type="submit" className="btn btn-primary">Add</button>
          </div>
        </div>
      </form>
    );
  }
}

Move manual project ID dropdown to Bootstrap styles
Move manual project ID dropdown to Bootstrap styles
