CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestore
YanivCode
YanivCode

Reputation: 144

firestore get and show data with react

Hey guys I'm trying to show the data I get from firestore. When I'm saving the code in the IDE and I'm on the current page, it is working. But if then I go to another page/refresh the browser - it doesn't render/render in time and render the "hold" I set him to return the code:

import React, { useState, useEffect } from 'react'
import firebase from 'firebase';
import { useAuth } from '../contexts/AuthContext';

export default function Cart() {

    const [userMail, setUserMail] = useState(undefined)
    const [userCart, setUserCart] = useState(undefined)
    const user = useAuth()
    const userDoc = firebase.firestore().collection("cart").doc(userMail)

    useEffect(() => {
        if (user.currentUser) {
            setUserMail(user.currentUser.email, console.log(userMail))
            userDoc.get().then((doc) => {
                if (doc.exists) {
                    let cart = doc.data()
                    setUserCart(cart)
                }
            })
        }
    }, [])


    if (userCart === undefined) return <h1>hold</h1>
    const { item } = userCart
    console.log(item);
    return (
        <main className="main-cart">
//here im try to make sure it got the data befor render//
            {item && item.map(item => {
                return (
                    <div key={item.itemId}>
                        <h3>{item.name}</h3>
                    </div>
                )
            })}
        </main>
    )
}

Upvotes: 1

Views: 39

Answers (1)

YanivCode
YanivCode

Reputation: 144

i just had to replace the 2nd parameter from the useEffect to userCart

Upvotes: 1

Related Questions