React Native - this.state не определен

У меня есть собственный компонент, который выглядит следующим образом

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { PermissionsAndroid } from "react-native";
import SmsAndroid  from 'react-native-get-sms-android';

var filter = {
    box: 'inbox', // 'inbox' (default), 'sent', 'draft', 'outbox', 'failed', 'queued', and '' for all
    // the next 4 filters should NOT be used together, they are OR-ed so pick one
    read: 1, // 0 for unread SMS, 1 for SMS already read
    // _id: 1234, // specify the msg id
    // address: '+1888------', // sender's phone number
    // body: 'How are you', // content to match
    // the next 2 filters can be used for pagination
    indexFrom: 0, // start from index 0
    maxCount: 10, // count of SMS to return each time
};

export default class App extends React.Component {


  constructor(props) {
    super(props);
    this.state = {messages : {}, count: 0}
  }

  componentDidMount() {
    console.info(" => Component is mounted")

    SmsAndroid.list(JSON.stringify(filter), (fail) => {
            console.info("Failed with this error: " + fail)
        },
        (count, smsList) => {
            console.info('Count: ', count);
            console.info('List: ', smsList);
            var arr = JSON.parse(smsList);

            this.setState({
              messages:arr,
              count:count
            })

            arr.forEach(function(object){
                console.info("Object: " + object);
                console.info("-->" + object.date);
                console.info("-->" + object.body);
            })
        });

  }

  componentWillUnMount () {
    console.info("Component will be unmounted")
  }

  render() {
    return (
      <View style = {styles.container}>

        <Text>Open up App.js to start working on your app!</Text>
        <Text className = "imp">{this.state.count}</Text>
        <Text className = "imp">{typeof(this.state.messages)}</Text>
        {Object.keys(this.state.messages).map(function(key) {
          <Text className = "imp">{this.state.messages[key]}</Text>
        })}

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imp : {
    color:'#e74c3c'
  },
});

Тем не менее, код работает, когда я это делаю

<Text className = "imp">{this.state.count}</Text>
<Text className = "imp">{typeof(this.state.messages)}</Text>

но это не удается, когда я пытаюсь перебрать сообщения

{Object.keys(this.state.messages).map(function(key) {
  <Text className = "imp">{this.state.messages[key]}</Text>
})}

Это не удается со следующим сообщением

Не могли бы вы сообщить мне, что не так в моем коде?

Спасибо Гаган