title: React Uncaught TypeError: this.state.messages.map is not a function
body: <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>