title: React.js .map is not a function, mapping Firebase result
body: <p>I am very new to react and Firebase and I really struggle with arrays and objects I'm guessing that you can't use <code>.map</code> with the way my data is formatted (or type). I've looked through stack but nothing has helped (at least in my poor efforts to implement fixes).</p>
  
  <p>I am trying to use <code>.map</code> to map through a result from firebase but I get the error <strong>TypeError:</strong> <code>this.state.firebasedata.map</code> <strong>is not a function</strong>.</p>
  
  <p>getting the data: </p>
  
  <pre><code>componentWillMount(){
  this.getVideosFromFirebase()
  
  }
  
  getVideosFromFirebase(){
    var youtubeVideos = firebase.database().ref('videos/');
    youtubeVideos.on('value', (snapshot) =&gt; {
      const firebasedata = snapshot.val();
      this.setState({firebasedata});
    });
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Ky1nY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ky1nY.png" alt="enter image description here"></a></p>
  
  <p>relevant states:</p>
  
  <pre><code>constructor(props){
    super(props);
  
    this.state = {
      firebasedata: []
    }
    };
  </code></pre>
  
  <p>.map in render:</p>
  
  <pre><code>render(){
    return(
      &lt;div&gt;
           {this.state.firebasedata.map((item) =&gt;
              &lt;div key="{item}"&gt;
              &lt;p&gt;{item.video.name}&lt;/p&gt;
              &lt;/div&gt;
           )}
      &lt;/div&gt;
    );
  }
  </code></pre>