title: Unhandled Rejection (TypeError): this.state.products.map is not a function
body: <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import './StoreFront.css';
  
  class StoreFront extends Component {
    constructor() {
      super();
  
      this.state = {
          products: []
      }
  }
  
  componentDidMount() {
      axios.get("url")
          .then((response) =&gt; {
              this.setState({
                  products: response
              })
          })
  }
  
  render() {
      let productDisplay = this.state.products.map((element, index) =&gt; {
          return (
              &lt;div className="product-container" key={index}&gt;
                  &lt;h2&gt;{element.title}&lt;/h2&gt;
                  &lt;img src={element.image} alt="" /&gt;
                  &lt;h2&gt;{element.desc}&lt;/h2&gt;
                  &lt;h3&gt;{"$" + element.price + ".00"}&lt;/h3&gt;
                  &lt;button onClick={() =&gt; this.props.addToShoppingCart(element)}&gt;Purchase!&lt;/button&gt;
              &lt;/div&gt;
          )
      })
      return (
          &lt;div className="storefront-container"&gt;
              {productDisplay}
          &lt;/div&gt;
      )
  }
  }
  
   export default StoreFront;
  </code></pre>
  
  <p>I've looked all over and when console logged I'm getting a bunch of objects back inside of the products array. I have used the debugger inside of chrome and the bug always starts at link 24 or "let productDisplay = this.state.products.map"
  i can put an object inside of products like this products: [{}] but when done the values are undefined. Most responses in google are dealing with .json packages or setting items to be strings and acting as if they are arrays still.</p>