React refactoring experiment

gistfile1.txt

var ModelSelect = React.createClass({
  componentDidMount: function (){
    jQuery(ReactDOM.findDOMNode(this)).selectpicker();
  },
  componentDidUpdate: function (){
    jQuery(ReactDOM.findDOMNode(this)).selectpicker("refresh");
  },
  render: function() {
    return (
      <select className="modelSelect" disabled={this.props.data.length == false} onChange={this.props.handleChange}>
      <option value="all">Manufacturer</option>
      {this.props.data.map(function(m, i){
        return <option key={i} value={m.term_id}>{m.name}</option>
        })
      }
      </select>

    );
  }
});
var ManufacturerSelect = React.createClass({
  componentDidMount: function (){
    jQuery(ReactDOM.findDOMNode(this)).selectpicker();
  },
  componentDidUpdate: function (){
    jQuery(ReactDOM.findDOMNode(this)).selectpicker("refresh");
  },
  render: function() {
    return (
      <select className="manufacturerSelect" defaultValue="all" onChange={this.props.handleChange} >
        <option value="all">Manufacturer</option>
      {this.props.data.map(function(m, i){
        return <option key={i} value={m.term_id}>{m.name}</option>
        })
      }
      </select>
    );
  }
});
var ButtonMakeCustom = React.createClass({
  componentWillReceiveProps(newProps){
    if(newProps.manufacturer && newProps.model)
      this.setState({
        valid: true
      });
  },
  getInitialState: function(){
    return {
      valid: false
    }
  },
  render: function(){
    return (
      <input type="button" value="Custom" alt="[Submit]" onClick={this.handleClick} className="button" disabled={!this.props.valid}/>
    );
  }
});
var ButtonChooseDesign = React.createClass({
  componentWillReceiveProps(newProps){

  },
  getInitialState: function(){
    return {
      valid: false
    }
  },
  render: function(){
    return (
      <input type="button" value="Predefined" alt="[Submit]" className="button" disabled={!this.props.valid}/>
    );
  }
});
var DeviceChooser = React.createClass({
  handleManufacturerChange: function(e){
    var haystack = this.state.dropdownTree[this.props.part];
    var needle = e.target.value;
    var result = $.grep(haystack, function(el){
      return el.term_id == needle;
    });
    this.setState({
      manufacturer: e.target.value,
      models: result[0].children
    })
  },
  handleModelChange: function(e){
    this.setState({
      model: e.target.value
    });
  },
  getInitialState: function(){
    return{
      dropdownTree: {
        "phone-model": [],
        "tablet-model": [],
        "laptop-model": []
      },
      manufacturers: [],
      manufacturer: {},
      models: [],
      model: {},
      valid: false,
      url: false
    }
  },
  componentWillMount: function () {
    $.post(ajax_url, {
      action: "get_device_data"
    }, function(response) {
      this.setState({
        dropdownTree : response,
        manufacturers: response[this.props.part]
      });
    }.bind(this));
  },
  render: function() {
    return (
      <div className="deviceChooser">
        <ManufacturerSelect data={this.state.manufacturers} handleChange={this.handleManufacturerChange}/>
        <ModelSelect data={this.state.models} handleChange={this.handleModelChange}/>
        <ButtonMakeCustom valid={this.state.valid} url={this.state.url}/>
        <ButtonChooseDesign valid={this.state.valid} url={this.state.url}/>
      </div>
    );
  }