title: How can I print the information to the screen fetched from firebase?
body: <p>I am struggling to console log the information fetched from firebase. </p>
  
  <p>My code: 
      class HistoryPage extends Component {</p>
  
  <pre><code>componentWillMount() {
      this.props.historyFetch();
  }
  
  render() {
      var ob = this.props.xyConsts[0];
      console.log(ob);
      return (
          &lt;Text&gt;{this.props.xyConsts[0].const1}&lt;/Text&gt;
      );
  }
  }
  
  const mapstateToProp = (state) =&gt; {
  const xyConsts = _.map(state.historyPage, (val, uid) =&gt; {
      return { ...val, uid };
  });
  return { xyConsts };
  };
  
  export default connect(mapstateToProp, { historyFetch })(HistoryPage);
  </code></pre>
  
  <p>From console log, I got information can be seen here <a href="https://i.stack.imgur.com/pmdLP.png" rel="nofollow noreferrer">the console log printout</a></p>
  
  <p>It looks like an object. But when I want to print out "this.props.xyConsts[0].const1" or other key, I got undefined. </p>
  
  <p>I suspect that the info returned from firebase is not an object, but how can I reach and print things like "this.props.xyConsts[0].const1" on the screen?</p>
  
  <p>Any help will be appreciated.</p>