title: ReactJS: Intercommunication between two dropdowns
body: <p>I am trying to develop two dropdowns in ReactJS component, The second dropdown values depend on first dropdown value. 
  If first dropdown value changes, second dropdown values changes based on first dropdown value. Like Countries and States.
  The following is the code snippet. can you help me how to implement.</p>
  
  <p>Thanks </p>
  
  <pre><code>&lt;script type="text/jsx"&gt;
  /*** @jsx React.DOM */
  var data = [
    {key:"eStatements", value:"eStatements"},
    {key: "mobileApp", value:"Mobile App"},
    {key: "billPay", value:"Bill Pay"},
    {key: "remoteDeposit", value:"Remote Deposit"},
    {key: "onlineBanking ", value:"Online Banking"},
    {key: "P2P", value:"P2P"}
  ];
  var myOptions = [];
  
  var DropdownApp = React.createClass({
    render:function(){
      return (
        &lt;div&gt;
          &lt;SelectApp data={this.props.data} name={this.props.name}/&gt;
        &lt;/div&gt;
  
      );
    }
  });
  
  var SelectApp = React.createClass({
    getInitialState:function(){
        return {myOptions : {"signUp" : "Sign Up"}};
    },
      handleSelectChange : function(e){
        var product = e.target.value;
        if("eStatements" == product) {
          myOptions = [{key: "signUp" , value: "Sign Up"}];
        } else if("Mobile App" == product) {
          myOptions = [{key: "noOfLogins" , value:  "Number of Logins"}];
        } else if("Bill Pay" == product) {
          myOptions = [{key: "noOfPayments" , value:  "Number of Payments"},{key:  "addNewPayeeAndPay" , value:  "Add New Payee"}];
        } else if("Remote Deposit" == product) {
          myOptions = [{key: "noOfDeposits" , value:  "Number of Deposits"}];
        } else if("Online Banking" == product) {
          myOptions = [{key: "noOfLogins" , value:  "Number of Logins"}];
        }else if("P2P" == product) {
          myOptions = [{key: "noOfPayments" , value:  "Number of Payments"}, {key: "addNewPayeeAndPay" , value:  "Add New Payee"}];
        }
        this.setState({myOptions: myOptions});
      },
      render: function(){
        var opt = this.props.data.map(function(d){
          return (&lt;OptionsApp key={d.key} value={d.value}/&gt;);
        });
          return (
            &lt;div&gt;
            &lt;div&gt;
              &lt;select name={this.props.name} id={this.props.name} onChange={this.handleSelectChange}&gt;
              {opt};
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;select name={this.state.myOptions} &gt;
              {opt};
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      });
  
      var OptionsApp = React.createClass({
        render : function(){
            return (
                &lt;option value={this.props.key}&gt; {this.props.value}&lt;/option&gt;
            );
        }
      });
  React.renderComponent(&lt;DropdownApp data={data} name="my name"/&gt;, document.getElementById("dropDown"))
  
  &lt;/script&gt;
  </code></pre>