Header.js

import React from 'react'
import ModalRepoForm from './ModalRepoForm'
import ReactAddonsUpdate from 'react-addons-update'
import Loader from 'halogen/PulseLoader'
import { Link } from 'react-router-dom'
import autobind from 'autobind-decorator'

@autobind
export default class Header extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: null, loading: true, error: null
    };
  }

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error})
    )
  }

  addRepo(repo) {
    let data = ReactAddonsUpdate(this.state.data, { $push: [repo] })
    this.setState({ data: data })
  }

  render() {
    let result = null;
    if (this.state.loading) {
      result = <Loader color="#286090" size="12px" margin="4px"/>;
    }
    else if (this.state.error !== null) {
      result = <span>Error: {this.state.error.message}</span>;
    }
    else {
      const data = this.state.data.map((repo) => {
        const url = `/regional_design/${repo.id}?object=repo`
        return (
          <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
        )
      })

      result = data;
    }
    return (
      <div className="text-left top-header">
        <ModalRepoForm handleNewRepo={ this.addRepo } />
        <div className='col-md-10'>
          { result }
        </div>
        <div className="clearfix"></div>
      </div>
    )
  }
}