title: How to populate dropdown options dynamically using a promise
body: <pre><code>import { getCustomer } from './Customers';
  let optionItems=[];
  
  export const LOV: React.FunctionComponent = () =&gt; {
    const loadCustomer = async () =&gt; {
    const data = await getCustomer();
    for (var i=0; i &lt; data.value.length ; ++i)
    {
     optionItems.push({
      key: data.value[i].CustomerId,
      text: data.value[i].CustomerName
    });
   }
  }
  useEffect(() =&gt; {
   loadCustomer();
  }, [])
  
  return (
    &lt;SearchableDropdown options={optionItems}/&gt;    
  );};
  </code></pre>
  <p><strong>Code in Customers.tsx</strong></p>
  <pre><code>export const getCustomer = async (): Promise&lt;any&gt; =&gt; {
  const response = await 
  $.ajax({
      url: apiURL,
      type: &quot;GET&quot;,
      headers: headers,
      data: null,
      cache: false,
      beforeSend: function (request) {
        request.setRequestHeader(&quot;Authorization&quot;, 'Bearer ' + accessToken); 
      }
  })
  .done( function (data) {
      return data;
  })
  .fail(function (jqXHR) {
      if (jqXHR.status == 401) {
          promptAuth(jqXHR.getResponseHeader(&quot;WWW-Authenticate&quot;));
      } 
      else {
          console.log(&quot;NOT 401&quot;);
      }
  });  
  return response;
  }
  </code></pre>
  <p>I'm trying to populate a dropdown dynamically using a promise. I'm using Fluent-react Dropdown. getCustomer() loads values to const data. However, I can't see any values in the dropdown even though data is not null. Please help.</p>
  <p>Fluent Dropdown =&gt;  <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown</a></p>