title: React : adding values dynamically to a dropdown list
body: <p>I am attempting to populate drop down list dynamically. The list contains of states that are available in database . I am not supposed to add all 50 states, just the ones in the database , hence why this has to be dynamic.</p>
  <p>This is not working because there is no 'add' function available to 'dropdown' element. Here is the error:</p>
  <pre><code>Project-fields.js:104 Uncaught (in promise) TypeError: e.add is not a function
  </code></pre>
  <p>The error is pointing to the line 'dropdown.add(options);'</p>
  <p>This is the JSON object I receive upon fetch():</p>
  <pre><code>STATES: [{&quot;_id&quot;:&quot;Virginia&quot;,&quot;name&quot;:&quot;Virginia&quot;,&quot;abbreviation&quot;:&quot;VN&quot;,&quot;__v&quot;:0},{&quot;_id&quot;:&quot;North Carolina&quot;,&quot;name&quot;:&quot;North Carolina&quot;,&quot;abbreviation&quot;:&quot;NC&quot;,&quot;__v&quot;:0},{&quot;_id&quot;:&quot;Texas&quot;,&quot;name&quot;:&quot;Texas&quot;,&quot;abbreviation&quot;:&quot;TX&quot;,&quot;__v&quot;:0},{&quot;_id&quot;:&quot;Louisiana&quot;,&quot;name&quot;:&quot;Louisiana&quot;,&quot;abbreviation&quot;:&quot;LA&quot;,&quot;__v&quot;:0},{&quot;_id&quot;:&quot;5f1ef364691bf8c340104c18&quot;,&quot;name&quot;:&quot;California&quot;,&quot;abbreviation&quot;:&quot;CA&quot;}
  </code></pre>
  <p>My Code :</p>
  <pre><code>function StateSelect({ values, initial }) {
  
   async function fetchStates(){
          let dropdown = document.getElementById('select');
          dropdown.length = 0;
          .then(
              function(response){
                  if(response.status !== 200)
                  {
                    console.warn('State Object Not Fetched' + response.status);
                    return;
                  }
  
                  response.json().then(function(data){
                      
                      console.log(`STATES: ${JSON.stringify(data)}`);
                      for(let i = 0; i &lt; data.length; i++)
                      {
                          options = document.createElement('option');
                          options.value = data[i].name;
                          options.label = data[i].name;
                        // setOptions(data[i].name);
                        dropdown.add(options);
                          console.log(`OPTION: ${options}`);
  
                      }
                  })
              }
          )
  
          
      }
  useEffect(() =&gt; {
          
          fetchStates();
  },[]);
            
  return (
          &lt;div className='attribute-edit-container'&gt;
              &lt;div className='attribute-name'&gt;{'State'}&lt;/div&gt;
              &lt;Select id=&quot;select&quot;&gt;
              &lt;/Select&gt;
         );
  } //StateSelect
  </code></pre>
  <p>Please help. Thank you</p>