title: Dynamic dropdown list react axios get request
body: <p>Inside of my main <code>App.js componentDidMount()</code> lifecycle phase I have an axios get request to a rest service. </p>
  
  <p>EDIT: Included full <code>UserForm.js</code></p>
  
  <pre><code>class App extends Component {
  //  default state object
      constructor() {
      super();
  
      this.state = {
          schemas: []
      } 
  }
  
  
    componentDidMount() {
       axios
        .get('/dataschema/list')
        .then(response =&gt; { 
             console.log(response)
             this.setState({
                 schemas: response
             });
        })
        .catch(error =&gt; console.log(error.response));
   }
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;App&lt;/h1&gt;
          &lt;/header&gt;
  
          &lt;LinkButton /&gt;
          &lt;UserForm schemas={this.state.schemas} /&gt;
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>This request is successful in returning an array of schemas(strings) (only 1 for now) in the console messages</p>
  
  <pre><code>Response:
  {
      "data": [
          "Phone Record"
      ]
  </code></pre>
  
  <p>How can I populate this <code>UserForm.js</code> dropdown list with the <code>Phone Record</code> that was returned by the axios get request</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  class UserForm extends React.Component {
    constructor() {
      super();
      this.state = {schemas: []};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.data});
    }
  
    handleSubmit(event) {
      alert('The dataschema you picked is: ' + this.state.schemas);
      event.preventDefault();
    }
  
    render() {
      return (
          &lt;div&gt;
            &lt;form onSubmit={this.handleSubmit}&gt;
              &lt;label&gt;
                Pick the dataschema to describe your data file:
                    &lt;select value={this.state.value} onChange={this.handleChange}&gt;
                { 
                  (schemas &amp;&amp; schemas.length &gt; 0) &amp;&amp; schemas.map((schema) =&gt; {
                    return (&lt;option value="${schema.value}"&gt; {schema.name}&lt;/option&gt;);
                  })
                }
                &lt;/select&gt;
              &lt;/label&gt;    
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  export default UserForm;
  </code></pre>