How do I print out the values I see in my console? I need to display them in the app I am running in React Native using Expo. Do I need to map through the object array and print out values, or run the MyProfile a different way because it is asynced?
Thanks!
import { useNavigation } from "@react-navigation/core";
import React, { useEffect, useState } from "react";
import firebase from "firebase/app";
import "firebase/firestore";
import { auth } from "../firebase";
import {
Text,
View,
StyleSheet,
Image,
SafeAreaView,
ScrollView,
TouchableOpacity,
} from "react-native";
import { Animate } from "react-native-entrance-animation";
import Copyright from "./Copyright";
const ProfileScreen = () => {
const navigation = useNavigation();
const MyProfile = () => {
const [posts, setPosts] = useState(null);
let myPosts = "Profile loading...";
const collectIdsAndDocs = (doc) => {
return { id: doc.id, ...doc.data() };
};
useEffect(() => {
const getPost = async () => {
const snapshot = await firebase
.firestore()
.collection("profiles")
.where("email", "==", auth.currentUser.email)
.get();
myPosts = snapshot.docs.map(collectIdsAndDocs);
console.log(myPosts);
setPosts({ myPosts });
};
getPost();
}, []);
return (
<View>
<Text>{/*how do I print out values here!? I see them in console*/}</Text>
</View>
);
};
Since you already calls the setPosts useState hook, you can access posts in your rendering code:
return (
<View>
{posts.map((post) => (
<Text>{post.id}</Text>
))}
</View>
);
To solve the null problem, pass in an empty array as the initial value when you define the state:
const [posts, setPosts] = useState([]);