React Uncaught TypeError: this.state.messages.map is not a function
<p>I'm developing a React application and I've run into a problem with this mapping function:</p>

<pre><code>render() {
    const messages = this.state.messages.map((message) =&gt; {
        return (
            &lt;li key={message[".key"]}&gt;{message.text}&lt;/li&gt;
        )
    })
    return (...)
}
</code></pre>

<p>I get the following error:</p>

<blockquote>
  <p>Uncaught TypeError: this.state.messages.map is not a function</p>
</blockquote>

<p>I think it has something to do with the key. My messages state is filled using the <code>componentDidMount</code> function with <code>Firebase</code>:</p>

<pre><code>componentDidMount() {
    firebase.database().ref("messages/").on("value", (snapshot) =&gt; {
        const messages = snapshot.val()
        if(messages != null) {
            this.setState({
                messages: messages
            })
        }
    })
}
</code></pre>

<p>And messages are added with this function:</p>

<pre><code>submitMessage(e) {
    const nextMessage = firebase.database().ref("messages/").push({
        text: this.state.message
    })
}
</code></pre>

<p>This means my Firebase database with one message looks like this:</p>

<pre><code>{
    "messages" : {
        "-KV6trWbEW73p8oS49Qk" : {
            "text" : "test"
        }
    }
}
</code></pre>

<p>My suspicion is that I am identifying the key incorrectly. Any help with solving this issue would be much appreciated!</p>