title: How to fix "TypeError: items.map is not a function" when working with React and APIs?
body: <p>I'm new to React and am trying to pull in some information from an API, but keep getting this error when using the .map function to pass the retrieved data into an array:</p>
  
  <blockquote>
    <p>TypeError: items.map is not a function.</p>
  </blockquote>
  
  <p>I'm not too familiar with JavaScript, so I don't fully understand what's going on here. I've included my code:</p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.css";
  
  class App extends Component {
    constructor() {
      super();
      this.state = {
        items: [],
        isLoaded: true
      };
    }
  
    componentDidMount() {
      fetch("http://www.colr.org/json/colors/random/7")
        .then(res =&gt; res.json())
        .then(json =&gt; {
          this.setState({
            isLoaded: true,
            items: json
          });
        });
    }
  
    render() {
      var { items, isLoaded } = this.state;
      var itemInfo = items.map(item =&gt; (
        &lt;div key={item.colors.id}&gt;Hex:{item.colors.hex}&lt;/div&gt;
      ));
  
      if (!isLoaded) {
        return &lt;div&gt;{itemInfo}&lt;/div&gt;;
      } else {
        return &lt;div className="App"&gt;{itemInfo}&lt;/div&gt;;
      }
    }
  }
  
  export default App;
  </code></pre>