title: How to populate dropdown with api data in React?
body: <p>I'm trying to populate the options of a dropdown with all the titles from <a href="https://ghibliapi.herokuapp.com/films" rel="nofollow noreferrer">this</a> API.</p>
  <p>I'm trying to:</p>
  <ul>
  <li>Save the titles into the titles : [] object</li>
  <li>Map all those titles into separate  elements</li>
  </ul>
  <p>But I'm getting the error</p>
  <blockquote>
  <p>Unhandled Rejection (TypeError): Cannot convert undefined or null to
  object</p>
  </blockquote>
  <p>Can somebody point me in the right direction?</p>
  <pre><code>    import React from &quot;react&quot;
  import Header from &quot;./Header&quot;
  import CardContent from &quot;./CardContent&quot;
  import axios from &quot;axios&quot;;
  
  class CardContainer extends React.Component {
    state = {
      display: [],
      titles: []
    };
  
    componentWillMount = (e) =&gt; {
      axios.get(&quot;https://ghibliapi.herokuapp.com/films&quot;)
        .then(response =&gt; this.setState({
          titles: response.data[Object.keys(response.data.title)],
          display: response.data[Math.floor(Math.random() * response.data.length)]
        }))
    }
  
    render() {
      return (
        &lt;div className=&quot;container&quot;&gt;
          &lt;Header /&gt;
          &lt;select&gt;
            {this.state.titles.map(title =&gt; (
              &lt;option key={title} value={title}&gt;
                {title}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;    
  </code></pre>