1

Ive been having a problem with my react app, I'm trying to map out a array ive created when data is pulled in through google firebase, the array seems to be fine as I can access it using console.log but when I go to map out the array it doesn't seem to return the title or anything, some fresh eyes would be great to look at this many thanks.

const posts = [];

const postCollection = db.collection('posts').get().then(snap => {
  snap.forEach(doc => {
    posts.push(doc.data());
  })
});

console.log(posts);

function Content() {

  return (
    <div>
      {posts.map(post => {
        return <p key={post.id}>{post.title}</p>;
      })}
    </div>
  );
}

Screenshot of the array:

enter image description here

Any help would be much appreciated.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Aetheris
  • 11
  • 1
  • That is not how [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) work. You try to log a variable that is set later. – HMR Jun 17 '20 at 10:54
  • 1
    Duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – Guy Incognito Jun 17 '20 at 10:54
  • More specifically, since this is React you're supposed to put the data in state after receiving it instead of trying to use it immediately. – Guy Incognito Jun 17 '20 at 10:56

0 Answers0