title: React JS - How do I bind json data to a dropdown list
body: <p>I have a react JS file and I'm attempting to bind data to a dropdown list. The data is stored in the following testing API/json file: <a href="https://api.myjson.com/bins/okuxu" rel="nofollow noreferrer">https://api.myjson.com/bins/okuxu</a> ...I want to start by binding the client name to it's respective dropdown list.</p>
  
  <p>Sample json data:</p>
  
  <pre><code>[
      {
          "abc_buildingid": "11111112-64c2-5bd8-8b72-e92568694c76",
          "abc_energyprogramid": "5d84ef73-9b9a-475f-84e2-f307ad897df7",
          "siteName": "Construction One",
          "sampleCalibration": false,
          "clientName": "Client-1",
          "segmentName": "John Doe ES New Silver 4-7-2017-04-30-2018~25313~John Doe ES JDU Area Calibration~47851~Mod",
          "cfmRateFactor": 50
      }
  ]
  </code></pre>
  
  <p>...this is my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Ast extends Component {
  
     constructor(){
         super();
         this.state = {
             data: [],
         };
     } //end constructor
  
     bindDropDowns() {
         var clientName = document.getElementById('clientName').value
  
         for(var i=0; i &lt; this.state.data.length; i++) {
          var clientName = this.state.data[i].clientName;
         }
     }
  
     componentWillMount() {
      fetch('https://api.myjson.com/bins/okuxu', {
          method: 'GET',
          headers: {
              'Accept': 'application/json',
              'Content-type': 'application/json',
          },
          /*body: JSON.stringify({
              username: '{userName}',
              password: '{password}'
          })*/
      }) /*end fetch */
      .then(results =&gt; results.json()) 
      .then(data =&gt; this.setState({ data: data })   
  )
  
  } //end life cycle
  
      render() {
          console.log(this.state.data);
          return (
              &lt;div&gt;
  
  
                  &lt;form&gt;
                      &lt;div&gt;
  
                          &lt;h2&gt;Memeber Selection:&lt;/h2&gt;
  
                          &lt;div&gt;
  
                              &lt;div&gt;
                                  &lt;select className="custom-select" id="clientName" onSelect="bindDropDowns()"&gt;
                                  &lt;option selected&gt;Client&lt;/option&gt;
                                  &lt;/select&gt;     
                              &lt;/div&gt;&lt;br /&gt;
  
                              &lt;div&gt;
                                  &lt;select className="custom-select" id="siteName"&gt;
                                  &lt;option selected&gt;Site Building Name&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;&lt;br /&gt;
                              &lt;div&gt;
                                  &lt;select className="custom-select" id="segmentName"&gt;
                                  &lt;option selected&gt;Segments&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;&lt;br /&gt;
                             &lt;div&gt;
                                  &lt;label for="example-text-input"&gt;Modify CFM Rate Factor:&lt;/label&gt;
                                  &lt;input class="form-control" type="textbox"  id="cfmRateFactor" value="10" /&gt;
                              &lt;/div&gt;&lt;br /&gt;
                                  &lt;div&gt;
                                      &lt;button type="submit" className="btn btn-primary"&gt;Submit&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/form&gt;
              &lt;/div&gt;
  
  
          );
        }
  }
  
  export default Ast
  </code></pre>
  
  <p>I confirmed via the console that "this.state.data" contains all the information from the json file, so now I'm attempting to bind the client names to a dropdown list. Could I please get some guidance as to what I'm doing wrong? </p>