title: populate select with datajson using React js
body: <p>I'm trying to populate a select using React js, I'm using the example given on the react js docs(<a href="https://facebook.github.io/react/tips/initial-ajax.html" rel="nofollow">https://facebook.github.io/react/tips/initial-ajax.html</a>) , which uses jquery to manage the ajax calling, I'm not able to make it work, so far i have this:</p>
  
  <p>here the codepen : <a href="http://codepen.io/parlop/pen/jrXOWB" rel="nofollow">http://codepen.io/parlop/pen/jrXOWB</a></p>
  
  <pre><code>    //json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc  ase_id":"CTSTESTING","name":"CTS-Testing"}]
  //using jquery to make a ajax call
  var App = React.createClass({
    getInitialState: function() {
      return {
        opts:[]      
      };
    },
  
    componentDidMount: function() {
      var source="https://api.myjson.com/bins/3dbn8";
      this.serverRequest = $.get(source, function (result) {
        var arrTen = result[''];
        for (var k = 0; k &lt; ten.length; k++) {
              arrTen.push(&lt;option key={opts[k]} value={ten[k].companycase_id}&gt; {ten[k].name} &lt;/option&gt;);
          }
  
      }.bind(this));
    },
  
    componentWillUnmount: function() {
      this.serverRequest.abort();
    },
  
    render: function() {
      return (
        &lt;div&gt;        
          &lt;select id='select1'&gt;
            {this.state.opts}
           &lt;/select&gt;
        &lt;/div&gt;
      );
    }
  });
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div id="root"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>any idea how to make it works, thanks.</p>