How to use Select2 with Reactjs?
<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>