title: Fetch request in React: How do I Map through JSON array of objects, setState() & append?
body: <p>This API returns a JSON array of objects, but I'm having trouble with setState and appending. Most documentation covers JSON objects with keys. The error I get from my renderItems() func is:
  <code>ItemsList.js:76 Uncaught TypeError: Cannot read property 'map' of undefined</code></p>
  
  <p>in ItemsList.js</p>
  
  <pre><code>import React, { Component } from "react";
  import NewSingleItem from './NewSingleItem';
  import { findDOMNode } from 'react-dom';
  
  const title_URL = "https://www.healthcare.gov/api/index.json";
  
  class ItemsList extends Component {
    constructor(props) {
      super(props);
      this.state = {
        // error: null,
        // isLoaded: false,
        title: [],
        url: [],
        descrip: []
      };
    }
  
    componentDidMount() {
      fetch(title_URL)
        .then(response =&gt; {
          return response.json();
        })
        .then((data) =&gt; {
          for (let i = 0; i &lt; data.length; i++) {
            this.setState({
              title: data[i].title,
              url: data[i].url,
              descrip: data[i].bite,
            });
            console.log(data[i])   
          }
  
        })
        .catch(error =&gt; console.log(error));
    }
  
    renderItems() {
      return this.state.title.map(item =&gt; {
        &lt;NewSingleItem key={item.title} item={item.title} /&gt;;
      });
    }
  
    render() {
      return &lt;ul&gt;{this.renderItems()}&lt;/ul&gt;;
    }
  }
  
  export default ItemsList;
  </code></pre>
  
  <p>Above, I'm trying to map through the items, but I'm not quite sure why I cant map through the objects I set in setState(). Note: even if in my setState() I use <code>title: data.title</code>, it doesnt work. Can someone explain where I'm erroring out? Thanks.</p>
  
  <p>in App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { hot } from "react-hot-loader";
  import "./App.css";
  import ItemsList from './ItemsList';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt; Hello Healthcare &lt;/h1&gt;
          &lt;ItemsList /&gt;
          &lt;article className="main"&gt;&lt;/article&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>in NewSingleItem.js</p>
  
  <pre><code>import React, { Component } from "react";
  
  const NewSingleItem = ({item}) =&gt; {
    &lt;li&gt;
      &lt;p&gt;{item.title}&lt;/p&gt;
    &lt;/li&gt;
  };
  
  export default NewSingleItem;
  </code></pre>