How to access collection and documents within it in React.js? - reactjs

Question

So, basically I have started bulding new app with React, Redux and Firebase.
I am still learning and am not able to solve some things but this is the first moment, when I am really stuck.
I have created a collection in the Firestore called 'posts' and created one post manually just to see if it is working.
Unfortunately, after implementing my code I keep receiving an error:
TypeError: Cannot read property 'posts' of undefined
AdminpanelAuth.componentDidMount
/src/components/Admin/Adminpanel.js:23
20 | componentDidMount() {
21 | this.setState({ loading: true });
22 |
> 23 | this.props.firebase.posts().on('value', snapshot => { <- HERE IS THE PROBLEM
I have tried different variations and different approaches but none of them seemed to be working. Could anyone advise? Below I am attaching a part of my code of Adminpanel.js and Firebase.js
Firebase.js
import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
const firebaseConfig = {
my config here
};
class Firebase {
constructor() {
app.initializeApp(firebaseConfig);
// initialize Firebase Authenticator
this.auth = app.auth();
// initialize Firebase Realtime Database
this.db = app.firestore();
}
// Initialize two functions that connect to Firebase : Log In and Log Out
doSignInWithEmailAndPassword = (email, password) =>
this.auth.signInWithEmailAndPassword(email, password);
doSignOut = () => this.auth.signOut();
// Initialize functions for posts
post = pid => this.db.doc('posts'+pid);
posts = () => this.db.collection('posts');
}
export default Firebase;
Adminpanel.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import { withFirebase } from '../Firebase'
import { withAuthorisation } from '../Session'
import SignOutBtn from '../SignOutBtn'
const Adminpanel = ({authUser}) => (
<div>{authUser ? <AdminpanelAuth /> : <AdminpanelNonAuth />}</div>
)
class AdminpanelAuth extends Component {
constructor(props) {
super(props);
this.state = {
loading:false,
posts:[]
}
}
componentDidMount() {
this.setState({ loading: true });
this.props.firebase.posts().on('value', snapshot => {
const postsObject = snapshot.val();
const postsList = Object.keys(postsObject).map(key => ({
...postsObject[key],
pid: key,
}));
this.setState({
posts: postsList,
loading: false,
});
});
}
./Firebase/index.js
import FirebaseContext, { withFirebase } from './context';
import Firebase from './Firebase';
export default Firebase;
export { FirebaseContext, withFirebase };

Answer 1

It looks as though your problem might be that you are trying to access your Firebase class through props when it needs to be instantiated in your Adminpanel component.
In your imports you have:
import { withFirebase } from '../Firebase'
Which looks as though you are trying to use an HOC but looking at Firebase.js, there is no indication of you passing a component in, to then pass props to.
Instead, in your Adminpanel component, try changing your import to:
import Firebase from '../Firebase'
Then, in the constructor of Adminpanel:
constructor(props) {
super(props);
this.state = {
loading:false,
posts:[]
}
this.firebase = new Firebase()
}
Then, try to call the class method by doing:
this.firebase.posts().on('value', snapshot => {