Question: So I am trying to fetch data from Firestore, when I console log it I got the content of my collection back, but when I move the code to a function I am not able to return it back.

This code works:

```
const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true});
db.collection('story').get().then((snapshot) => {
snapshot.docs.forEach(doc => {console.log(doc.data())
    ;})
})

```

This doesnt work. (it compiles, but doesn`t return anything):

```
...
getMyStory = () => {
        const db = firebase.firestore();
        db.settings({ timestampsInSnapshots: true});
        db.collection('story').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            let items = doc.data();
        })
        });
        return this.items;
    }

    render () {

        return (
        <p>{this.getMyStory}</p>
);
}

```

What am I doing wrong?

Answer: 
The main problem here is that you are trying to render async data synchronously, which isn't possible to do with react [(not yet at least)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html "( not yet at least)").

When rendering async data you will usually leverage component [state](https://reactjs.org/docs/state-and-lifecycle.html).

Below is a standard usage pattern when loading and rendering something async.

```
class YourComponent extends Component {
  state = {
    items: []
  }

  // This method is called when the component mounts
  // Usually  a good place to do async requests
  componentDidMount() {

    db.collection('story').get().then(snapshot => {
      // After promise is finished set data to local state
      // When setting state the render method will be called, thus rerendering the UI
      this.setState({ items: snapshot })
    })
  }

  render() {
    // Access your items from local component state
    const { items } = this.state;

    return (
      <div>
        {items.forEach(doc => {
          // Render whatever data is in your document
          return <p key={doc.id}> { Your data goes here }</p>
        })
        }
      </div>
    )
  }
}

```
if any one is using React with Redux with Firebase and has difficulty here is how to do it
here i get all the publications from firestore using redux

```
// publicationsActions.js

var publicationsRef = db.collection("publications")
var publicationsList = []

// Function that returns the publications list
export const getPublications = () => async (dispatch) => {
    await publicationsRef.get().then((res) => {
        res.docs.forEach(doc => {
            publicationsList.push(doc.data())
        })
        dispatch({
            type: GET_PUBS,
            payload: publicationsList
        })
    })
}

// publicationReducer.js

export default function (state = initialState, action) {
    switch(action.type){
        case GET_PUBS:
            return {
                ...state,
                items: action.payload
            }
        case ADD_PUB:
            return {
                ...state,
                items: [action.payload, ...state.items]
            }
        default:
            return state; 
    }
}

```