how to bring all the pictures from a collection in firebase?

Question

I am following the documentation in Firebase, I am able to post pictures and they get to my collection (Pictures) but I cannot get them back, I do not get any error or so but It never gets to the console log in the get method, this is the code which is basically done following the documentation:

import React, { Component } from "react";
import firebase, { firestore } from "firebase";
const firebaseConfig = {
  apiKey: "AIzaSyBaYaChURjABW6kNE0D5yQaIU88RxhFAL4",
  authDomain: "jammer-documents.firebaseapp.com",
  databaseURL: "https://jammer-documents.firebaseio.com",
  projectId: "jammer-documents",
  storageBucket: "jammer-documents.appspot.com",
  messagingSenderId: "74638218427",
  appId: "1:74638218427:web:8ce7ba1fc2f8de7d4bc59e"
};
firebase.initializeApp(firebaseConfig);

export default class Pictures extends Component {
  state = {
    photos: []
  };
  componentDidMount() {
    let images = [];
    firebase
      .firestore()
      .collection("Pictures")
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          let imageData = {
            url: doc.data().url,
            created: doc.data().added
          };
          images.push(imageData);
        });
      });
    console.log("images", images);
    console.log(this.state.photos);
    this.setState({ photos: images });
    console.log(this.state.photos);
  }
  render() {
    const items = this.state.photos;

    return (
      <div className="container-fluid pt-3">
        <div className="card-columns">
          {items.map(i => (
            <div className="card">
              <img className="card-img-top materialboxed" src={i.url} alt="" />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Don't expose your firebase project credentials. Those should be secrets. — Shehan Dhaleesha, Feb 11 '20 at 13:39
@ShehanDhaleesha Firebase project configuration data is **not** a secret, and is in fact needed to be able to identify the project on Google's servers. While it's not common to share them on Stack Overflow, they are not secret. See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public — Frank van Puffelen, Feb 11 '20 at 14:24
So I can use those keys for my projects and the cost will go to the key owner. Right? — Shehan Dhaleesha, Feb 12 '20 at 04:02

score 2 · Accepted Answer · answered Feb 11 '20 at 13:36

The block of code inside of componentDidMount is async, so the setState is being called straight away. You need to set state after the request has returned, and after you have looped over each document:

  let images = [];
    firebase
      .firestore()
      .collection("Pictures")
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach(function(doc) {
          let imageData = {
            url: doc.data().url,
            created: doc.data().added
          };
          images.push(imageData);
        });

        this.setState({ photos: images });
      });

Great answer Elliot! – Frank van Puffelen Feb 11 '20 at 14:27 — Frank van Puffelen, Feb 11 '20 at 14:27

how to bring all the pictures from a collection in firebase?

1 Answers1