title: Dynamically bind Dropdown items Material-UI
body: <p>This question may be duplicate or trivial but i can't seem to make it work.</p>
  
  <p>I am using Matrial-UI in my React.js app to implement dropdown like this.</p>
  
  <pre><code>&lt;Select native value={this.state.contractType} onChange={this.handleChange} input={&lt;OutlinedInput id="contractType"/&gt; }&gt;
      {this.fetchContractTypes}
  &lt;/Select&gt;
  </code></pre>
  
  <p><code>fetchContractTypes</code> gets the dropdown values from a database.</p>
  
  <pre><code>fetchContractTypes = async () =&gt; {
      const dropDownValues = await ProjectAPI.getDropDownValues();
      const contractValues = dropDownValues.filter(value =&gt; value.type === 'contract');
      const data = [];
      contractValues[0].value.map(val =&gt; {
          data.push(&lt;option key={val.id} value={val.id}&gt;{ val.name }&lt;/option&gt;)
      });
      console.log(data);
      return data;
  }
  </code></pre>
  
  <p>I can see the dropdown values are being fetched in the browser console window but the items are not getting binded. Any idea how I can make this work?</p>