How, when choosing an option from a select, render the second unique select associated with it?

Question

React

For example, I chose the region of Russia in the select, a list of districts of this region appears, then a list of settlements. Are there examples online? )

Answer 1

const states = ['', 'Moscowskaya'];
const cities = {
  'Moscowskaya': ['Moscow']
};

const Selects = React.createClass({
  getInitialState() {
    return { state: '' };
  },
  _onStateChange(event) {
    this.setState({ state: event.target.value });
  },
  render() {
    return (
      <div>
        <select onChange={this._onStateChange}>{states.map((state) => <option key={state} value={state}>{state}</option>)}</select>
      {this.state.state ? <select>{cities[this.state.state].map((city) => <option key={city} value={city}>{city}</option>)}</select> : null}
      </div>
    );
  }
});

jsbin.com/towebuxeji/edit?js ,output