title: React Native: Accessing JSON data
body: <p>I'm using the <code>fetch</code> API to access the data and it turns out that when accessing this data which I have set in the data source it returns:</p>
  
  <blockquote>
    <p><strong>Warning</strong>: <strong>[TypeError: undefined is not an object(evaluating 'response.data.onwardflights')]</strong></p>
  </blockquote>
  
  <p>I am sure that I've fetched the data correctly as I have seen the data by printing it onto the console.</p>
  
  <p>Here is the code for the same!</p>
  
  <pre><code>'use strict';
  
  import React, {Component} from 'react';
  import {StyleSheet, View, Text, ListView, ScrollView} from 'react-native';
  
  const ds = new ListView.DataSource({rowHasChanged: (row1, row2) =&gt; row1 !== row2});
  
  class BusList extends Component {
  
      constructor() {
      super();
      // const ds = new ListView.DataSource({rowHasChanged: (row1, row2) =&gt; row1 !== row2});
      this.state = {
        dataSource: ds.cloneWithRows([]),
        getData: []
      };
    }
  
      componentDidMount() {
          this.loadJSONData();
      }
  
      loadJSONData() {
          fetch('api')
            .then((response) =&gt; {
              this.setState({getData: response})
              this.setState({dataSource: ds.cloneWithRows(response.data.onwardflights)})
              return response.json()
            })
            .then((responseJSON) =&gt; {
                      console.log(responseJSON)
                return this.setState({dataSource: this.state.dataSource.cloneWithRows(responseJSON)});
            })
            .catch((error) =&gt; {
              console.warn(error);
            });
      }
  
      renderRow(rowData) {
          return (
              &lt;View&gt;
                  &lt;Text&gt;{rowData.origin}&lt;/Text&gt;
              &lt;/View&gt;
          );
      }
  
      render() {
      return (
          &lt;View&gt;
              &lt;ListView
                  dataSource = {this.state.dataSource}
                  enableEmptySections = {true}
                  renderRow = {(rowData) =&gt; &lt;Text&gt;{rowData}&lt;/Text&gt;}   
              /&gt;
          &lt;/View&gt;
      );
    }
  }
  
  module.exports = BusList;
  </code></pre>
  
  <p>Any help will be appreciated!</p>