title: How to use Select2 with Reactjs?
body: <p>I have dependent fields like this</p>
  
  <pre><code>    &lt;List&gt;
       &lt;select&gt;
        &lt;option&gt;&lt;/option&gt;
        &lt;option&gt;&lt;/option&gt;
       &lt;/select&gt;
       &lt;select&gt;
        &lt;option&gt;&lt;/option&gt;
        &lt;option&gt;&lt;/option&gt;
       &lt;/select&gt;
       &lt;input /&gt;
     &lt;/List&gt;
  </code></pre>
  
  <p>If I had 5 <code>&lt;List/&gt;</code> components.How do I add <a href="https://select2.github.io/" rel="noreferrer">Select2</a> to each component.I googled online.But couldn't find any working solution.</p>
  
  <blockquote>
    <p>Code below for <strong><a href="https://github.com/JedWatson/react-select" rel="noreferrer">react-select</a></strong>.Getting error <strong>TypeError: event.target is undefined</strong>.</p>
  </blockquote>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react-dom');
  var Select = require('react-select');
  
  var Page = React.createClass({
  
      getInitialState: function () {
          return {
              firstValue: ''
          }
      },
  
      handleFirstLevelChange : function (event) {
          this.setState({
              firstValue: event.target.value
          });
      },
      render : function(){
  
          var options = [
              { value: '', label: 'Select an option' },
              { value: 'one', label: 'One' },
              { value: 'two', label: 'Two' }
          ];
  
          return (&lt;Select
              value={this.state.firstValue}
              options={options}
              onChange={this.handleFirstLevelChange}
              /&gt;)
      }
  });
  
  ReactDOM.render(&lt;Page /&gt;, document.getElementById('root'));
  </code></pre>