abortive attempt at combobox

brokenCombox.jsx

const BaseComponent = require('./BaseComponent');
const Marty = require('marty');
const { Combobox, configure } = require('react-widgets');
configure.setGlobalizeInstance(window.globalize)
const lsApi = require('../api/lsApi');

// unsurprisingly: this doesn't work
// produces error that says "combobox has no contents"

class SearchBox extends BaseComponent {
  constructor(options){
    super(options);
    this.state = { results: [] };
    this.bindAll('search'); // helper function from BaseComponent for binding methods
  }
  render(){
    return (
      <Combobox
        className="searchBox"
        data={this.state.results}
        defaultValue='Search...'
        onSubmit={ value => this.setState({ value })}
      />
    );
  }
  search(query){
    lsApi.searchEntities(query)
      .then(res => this.setState({results: res}))
      .catch(err => { this.setState({results: ['Try again...']});
      });
  }
}

module.exports = Marty.createContainer(SearchBox);

// more suprisingly: this renders but looks butt-ugly
// text is unstyled
// there is a button that says "show combobox"
// and results appear as a bulletted unordered list
// I have bootstrap installed and it styles other things...
// What gives? Some dependency I'm not giving react-widgets that it needs?
// Do I need to be using LESS instead of SASS?

class SearchBox extends BaseComponent {
  constructor(options){
    super(options);
    this.colors = ['red', 'white', 'blue'];
    this.state = { value: this.colors[0] };
    this.bindAll('search');
  }
  render(){
    return (
      <Combobox
        className="searchBox"
        data={this.colors}
        defaultValue='Search...'
        onSubmit={ value => this.setState({ value })}
      />
    );
  }
}

module.exports = Marty.createContainer(SearchBox);