I am very new to react and Firebase and I really struggle with arrays and objects I'm guessing that you can't use .map 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).

I am trying to use .map to map through a result from firebase but I get the error TypeError: this.state.firebasedata.map is not a function.

getting the data:

ponentWillMount(){
this.getVideosFromFirebase()

}

getVideosFromFirebase(){
  var youtubeVideos = firebase.database().ref('videos/');
  youtubeVideos.on('value', (snapshot) => {
    const firebasedata = snapshot.val();
    this.setState({firebasedata});
  });
}

relevant states:

constructor(props){
  super(props);

  this.state = {
    firebasedata: []
  }
  };

.map in render:

render(){
  return(
    <div>
         {this.state.firebasedata.map((item) =>
            <div key="{item}">
            <p>{item.video.name}</p>
            </div>
         )}
    </div>
  );
}

I am very new to react and Firebase and I really struggle with arrays and objects I'm guessing that you can't use .map 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).

I am trying to use .map to map through a result from firebase but I get the error TypeError: this.state.firebasedata.map is not a function.

getting the data:

ponentWillMount(){
this.getVideosFromFirebase()

}

getVideosFromFirebase(){
  var youtubeVideos = firebase.database().ref('videos/');
  youtubeVideos.on('value', (snapshot) => {
    const firebasedata = snapshot.val();
    this.setState({firebasedata});
  });
}

relevant states:

constructor(props){
  super(props);

  this.state = {
    firebasedata: []
  }
  };

.map in render:

render(){
  return(
    <div>
         {this.state.firebasedata.map((item) =>
            <div key="{item}">
            <p>{item.video.name}</p>
            </div>
         )}
    </div>
  );
}

• javascript
• reactjs

Share Improve this question Follow edited Apr 5, 2018 at 10:16 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Apr 5, 2018 at 5:48 BenjaminBenjamin 65522 gold badges1111 silver badges3232 bronze badges 3

• can you do a console.log(this.state.firebasedata) in your render function ? My guess is you need to do this.state.firebasedata.videos.map – klugjo Commented Apr 5, 2018 at 5:50
• This is because the response is most probably not an array.. seems it is an object. can you console.log(firebasedata) before setState? – illiteratewriter Commented Apr 5, 2018 at 5:52
• Make sure firebasedata state is an array. – Tolsee Commented Apr 5, 2018 at 5:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

This is because firebase does not store data as arrays, but instead as objects. So the response you're getting is an object.

Firebase has no native support for arrays. If you store an array, it really gets stored as an "object" with integers as the key names.

Read this for more on why firebase stores data as objects.

To map over objects you can do something like

Object.keys(myObject).map(function(key, index) {
   console.log(myObject[key])
});

For anyone ing here now, you can simply type snapshot.docs to get an array of all the documents in the relevant collection.

As an example, if you want to get all user objects from the collection users you can do the following:

const getAllUsers = async () => {
    const usersSnapshot = await db.collection('users').get()
    const allUsers = usersSnapshot.docs.map(userDoc => userDoc.data())
    return allUsers
}

As noted above Firebase snap.val() - is an object.

When you have to go through object you can also simply use for each:

for(var key in this.state.firebasedata){
   <div key="{key}">
   <p>{this.state.firebasedata[key].video.name}</p>
   </div>
}

I also remend creating a separate method for it, and call it in render. Hope this helps