CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestorenext.js
Mathieu Cloart
Mathieu Cloart

Reputation: 151

Firestore NextJS

I have a problem with firestore and Next.JS. I would like to have a list with the ul and li tag of y firetsore document.

I have install firestore and my doc is read by the consol log as you can see in the picture. screenshot of my safari console log

But as you can see in the same image nothing appear in my web page.

This is the code of my page : 

import React from 'react';
import {firebase, db} from '../../src/firebase/index';

class Discoverd extends React.Component {
    constructor(props) {
        super(props);
        this. ref = db.collection("Content");
        this.unsubscribe = null;
        this.state = {
            contents : []
        }
    };

    componentDidMount() {
        this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
    }

    onCollectionUpdate = (querySnapshot) => {
        const contents = [];
        querySnapshot.forEach((doc) => {
        const {Category, Name, Description} = doc.data();
        contents.push({
            key: doc.id,
            doc,
            Category,
            Name,
            Description
        });
        })
        console.log(contents);

        this.setState = ({
            contents
        });
    }

    render() {
        return (
            <div>
               <ul>
                {this.state.contents.map(content => 
                    <li key={content.key}>
                        <h3>{content.Name}</h3>
                    </li>

                )}
                </ul>
            </div>
        )
    }
}

export default Discoverd;

I don't know where is the problem and how to solve it please help me.

Thank you very much.

Upvotes: 2

Views: 636

Answers (1)

Perelan
Perelan

Reputation: 406

You're changing the state incorrectly.

Try doing this.setState({ contents }), instead of this.setState = ...

Upvotes: 1

Related Questions