Access array of objects to display in React Native Text component
<p>I’m having trouble accessing an array of objects in my JSON data to display in a React Native Text component.</p>

<p><strong>JSON data</strong></p>

<pre><code>{
    "name": "Pizza Joint",
    "when": [{
        "day": ["Sat", "Sun"],
        "start_time": "11:00",
        "end_time": "23:00"
    }]
}
</code></pre>

<p><strong>Code</strong></p>

<pre><code>&lt;View style={styles.container}&gt;
    &lt;Text style={styles.name}&gt;{venue.name}&lt;/Text&gt;
    &lt;Text style={styles.time}&gt;{venue.when[0].start_time}&lt;/Text&gt;
&lt;/View&gt;
</code></pre>

<p>This throws the error <code>Undefined is not an object (evaluating 'venue.when')</code> which I don't understand since <code>console.log(type of venue.when)</code> returns <code>object</code>.</p>

<p>How can I access the <code>when</code> object properties here?</p>

<p><strong>Additional notes</strong></p>

<p>I copied the app structure from <a href="http://www.appcoda.com/react-native-introduction/" rel="noreferrer">this tutorial</a>.</p>

<p>Here is <code>VenueList.js</code>:</p>

<pre><code>'use strict';

var React = require('react-native');
var VenueDetail = require('./VenueDetail');

var {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    TouchableHighlight,
    ActivityIndicatorIOS
   } = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        padding: 10
    },
    thumbnail: {
        width: 53,
        height: 81,
        marginRight: 10
    },
    rightContainer: {
        flex: 1,
    },
    title: {
        fontSize: 20,
        marginBottom: 8
    },
    author: {
        color: '#656565'
    },
    separator: {
        height: 1,
        backgroundColor: '#dddddd'
    },
    listView: {
           backgroundColor: '#F5FCFF'
       },
   loading: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center'
   }
});

// var REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';
var REQUEST_URL = 'http://apib.miniguide.es/wall/today';

class VenueList extends Component {

  render() {
    if (this.state.isLoading) {
      return this.renderLoadingView();
    }
    console.log(this.state.dataSource);

    return (
      &lt;ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderVenue.bind(this)}
        style={styles.listView}
      /&gt;
    );
  }

  renderLoadingView() {
    return (
      &lt;View style={styles.loading}&gt;
        &lt;ActivityIndicatorIOS
          size='large'/&gt;
          &lt;Text&gt;
            Loading venues...
          &lt;/Text&gt;
      &lt;/View&gt;
    );
  }

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) =&gt; row1 !== row2
      })
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
    .then((response) =&gt; response.json())
    .then((responseData) =&gt; {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(responseData),
        isLoading: false
      });
    })
    .done();
  }

  renderVenue(venue) {
    console.log(venue);
    return (
      &lt;TouchableHighlight onPress={() =&gt; this.showVenueDetail(venue)} underlayColor='#dddddd'&gt;
        &lt;View&gt;
          &lt;View style={styles.container}&gt;
            &lt;Image
//              source={{uri: venue.images[0].url}}
              style={styles.thumbnail} /&gt;
            &lt;View style={styles.rightContainer}&gt;
              &lt;Text style={styles.title}&gt;{venue.name}&lt;/Text&gt;
              &lt;Text style={styles.author}&gt;{venue.subtitle}&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          &lt;View style={styles.separator} /&gt;
        &lt;/View&gt;
      &lt;/TouchableHighlight&gt;
    );
  }
}

module.exports = VenueList;
</code></pre>

<p><code>console.log(venue)</code> produces the following format of data (I am simplifying output here for the purposes of the example):</p>

<pre><code>{
    name: 'Pizza Joint',
        when: [{
            day: ['Sat', 'Sun'],
            start_time: '11:00',
            end_time: '23:00'
        }]
}
</code></pre>

<p>I notice the above is not JSON since the quotes on the keys have been stripped out.</p>