title: Access array of objects to display in React Native Text component
body: <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>