javascript - Objects are not valid as a React child (found: [object Promise]). Showing error when I want to set a state to true

Question

I am new to React and firebase . I have enabled user authentication in my web app . I store user data in firestore . I want to fetch data from firestore of that user using "uid" of user . User authentication works well but when I introduced the fetching the data part in code and fetch data , auth.onAuthStateChanged() gives error in "App.js" file ,as shown in screenshot. But whenever I comment out the fetching the data part in the "Dashboard.js" file ,error is gone , eveything starts working flawlessly .

I found a solution that it may be because API call to firestore is returning an array of objects . But when I logged it's ouput on console it is not an array , it's a single object .Hence this solution also didn't work for me .

I am not understanding why on fetching data from firestore makes "App.js" state("user" - to check if user is logged in or not) to give error whenever I set the state to true . Fetching the data and setting the state to true are two different things . How state can give the error ? I am very anxious about this problem and can't able to figure it out why other piece of code is giving error which doesn't have to do much with fetching the data .

If everyone knows where the problem or anything I have missed , please let me know . It will be really a great help .

I have added a comment in "Dashboard.js" file where commenting that code block error is gone .

Error Screenshot :

App.js file :

import LoginSignUp from './components/LoginSignUp';
import './styles/App.css';
import {useState,useEffect}from 'react';
import {auth}from './utilites/firebase';
import Dashboard from './components/Dashboard';
function App() {
  const[user,setUser]=useState(false);
  useEffect(() => {
  auth.onAuthStateChanged((authUser)=>{
    if(authUser){
      setUser(true);
      console.log(authUser)
    }
    else{
      setUser(false);
      console.log("logged out")
    }
  })
  }, [])
  return (
    <div className="App">
      {user?<Dashboard/>:<LoginSignUp/>}
    </div>
  );
}

export default App;

Dashboard.js file :

import React,{useState,useEffect} from 'react';
import {Navbar,Nav,Form,Button,FormControl}from 'react-bootstrap';
import '../styles/Dashboard.css';
import {auth,db}from '../utilites/firebase';
import ScheduleModal from './ScheduleModal';
import DashboardMeetings from './DashboardMeetings';
export default function Dashboard() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [doclist,setDoclist]=useState(null);
let userid=null;
useEffect(() => {
      userid=auth.currentUser.uid;
      setDoclist(db.collection("users").doc(userid));
      }, [])
      return (
            <div className="Dashboard">
                  <Navbar bg="light" variant="light">
                  <Navbar.Brand href="#home">Navbar</Navbar.Brand>
                  <Nav className="mr-auto">
                        <Nav.Link href="#" onClick={handleShow}>Schedule a Metting</Nav.Link>
                  </Nav>
                  <Form inline>
                        <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                        <Button variant="danger" onClick={()=>auth.signOut()}>Log Out</Button>
                  </Form>
                  </Navbar>
                  <ScheduleModal show={show} handleClose={handleClose}/>
                  <Button variant="primary" onClick={handleShow} style={{margin:"18px"}}>
                        <i class="fa fa-plus" aria-hidden="true" style={{marginRight:"5px"}}></i>
                         Schedule a Meeting 
                  </Button>
                  <hr/>
                  <div className="meetings_list">
                        <DashboardMeetings/>
                        <DashboardMeetings/>
                        {   //Whenever I comment this block error will be gone and everything started working normal    
                              doclist?doclist.get().then((doc)=>{    
                                    if(doc.exists){
                                          // <Dashboard name={}     
                                          // console.log(doc.data());
                                    }
                              }).catch((err)=>console.log("Error in fetching documents")):null
                        }
                  </div>
            </div>
      )
}

question from:https://stackoverflow.com/questions/65856326/objects-are-not-valid-as-a-react-child-found-object-promise-showing-error

Answer 1

Your Dashboard missing closing tag, , but this fetch data part should be in useEffect, not in render.