CountySelector component

county-selector.js

var React = require('react');

var statesObj = {
  'Arkansas': [
    'County name',
    'Another county'
  ],
  'California': [
    'Some hippy county',
    'Weed growing county'
  ]
};
var states = Object.keys(statesObj);

var CountySelector = React.createClass({

  getInitialState: function() {
    return {
      selectedState: null,
      selectedCounty: null
    };
  },
  
  _onStateChange: function(event) {
    this.setState({selectedState: event.target.value});
  },
  
  _onCountyChange: function(event) {
    this.setState({selectedCounty: event.target.value});
  },

  render: function() {
    return (
      <div>
        <label>Select a state</label>
        <select onChange={this._onStateChange}>
          {states.map(function(state) {
            return <option value={state}>{state}</option>;
          })}
        </select>
        {this.state.selectedState && <div>
          <label>Select a county</label>
          <select onChange={this._onCountyChange}>
            {statesObj[this.state.selectedState].map(function(county) {
              return <option value={county}>{county}</option>;
            })}
          </select>
        </div>}
      </div>
    );
  }
});

module.exports = CountySelector;