How can I print the information to the screen fetched from firebase?

Question

I am struggling to console log the information fetched from firebase.

My code: class HistoryPage extends Component {

componentWillMount() {
    this.props.historyFetch();
}

render() {
    var ob = this.props.xyConsts[0];
    console.log(ob);
    return (
        <Text>{this.props.xyConsts[0].const1}</Text>
    );
}
}

const mapstateToProp = (state) => {
const xyConsts = _.map(state.historyPage, (val, uid) => {
    return { ...val, uid };
});
return { xyConsts };
};

export default connect(mapstateToProp, { historyFetch })(HistoryPage);

From console log, I got information can be seen here the console log printout

It looks like an object. But when I want to print out "this.props.xyConsts[0].const1" or other key, I got undefined.

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?

Any help will be appreciated.

Answer 1

There are mainly two possiblities:

1) Try to check you are getting the correct object in screen or not.

2) If object is correct then take a object ref like this:

var ob = this.props.xyConsts[0];
console.log(ob);
return (
    <Text>{ob.const1}</Text>
);

You can use object in two different way:

ob.const1 

and

ob['const1']

Hope this will help you...