Objects are not valid as a React child (found: [object Promise]) while rendering Firebase results

Question

I am getting the following error:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

I am using context in react and having a problem with props as I have forEach loop in inner components to fetch data from the database.

I don't know how to render a collection by using an array here.

Here is the code to fetch data due to which the error is occurring:

import React, { useEffect, useState } from "react";
import { db } from "../services/firebase";
import style from "./css/dashboard.module.css";
import InputTask from "./InputTask";
import Task from "./Task";

const Tasks = ({ user }) => {
  console.log("Tasks");

  return (
    <>
      <div className={style.card}>
        <InputTask user={user} />
      </div>

      {true
        ? db
            .collection("Users")
            .doc(`${user.email}`)
            .collection("tasks")
            .get()
            .then((querySnapshot) => {
              querySnapshot.forEach((doc) => {
                console.log(doc.id, " => ", doc.data());
                return (
                  <div className={style.card}>
                    <Task todo={doc} />
                  </div>
                );
              });
            })
        : null}
    </>
  );
};

export default Tasks;

Error's snapshot attached here

Looks like you probably need to add a return in your `.forEach()`. `querySnapshot.forEach((doc) => { console.log(doc.id, " => ", doc.data()); return (

); });` — ChrisG, May 20 '21 at 15:50
@souravojha Please take a look at my answer below and let me know if you were able to resolve the issue that way — Michalis Garganourakis, May 21 '21 at 14:49

Nand · Answer 1 · 2021-05-20T16:20:05.260

1

You haven't imported useContext hook from react

Try this

import React, { useEffect, useState, useContext } from "react";
import { auth } from "../services/firebase";

export const AuthContext = React.createContext();

export const AuthProvider = (props) => {
  const [loading, setLoading] = useState(true);
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
  }, []);
  if (loading) {
    return <p>Loading...</p>;
  }
  // console.log(children);
  return (
    <AuthContext.Provider value={{ currentUser }}>
   
      {props.children}
  
    </AuthContext.Provider>
  );
};

edited May 20 '21 at 16:20

answered May 20 '21 at 16:05

Nand

611
6
12

Can your please share the details of the error that you're facing – Nand May 20 '21 at 16:15
image attached .. plz kindly check it out – sourav ojha May 20 '21 at 16:23

score 1 · Accepted Answer · answered May 20 '21 at 16:20

Your render method (part attached below) will not wait until .then is triggered. Instead, it will return the Promise as is. Thus the Error: Objects are not valid as a React child (found: [object Promise]) you mentioned.

{
  true
    ? db
        .collection("Users")
        .doc(`${user.email}`)
        .collection("tasks")
        .get()
        .then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
            return (
              <div className={style.card}>
                <Task todo={doc} />
              </div>
            );
          });
        })
    : null
}

As this is an async operation, it's better if you use a state for this part. For instance, you can fetch the data when your component mounts (with a useEffect), put everything into a state (with useState), and render the state.

import React, { useEffect, useState } from "react";
import { db } from "../services/firebase";
import style from "./css/dashboard.module.css";
import InputTask from "./InputTask";
import Task from "./Task";

const Tasks = ({ user }) => {
  const [tasks, setTasks] = useState([]);

  // fetching data again when user changes
  useEffect(() => {
    db
      .collection("Users")
      .doc(`${user.email}`)
      .collection("tasks")
      .get()
      .then((querySnapshot) => {
        setTasks(querySnapshot);
      })
  }, [user]);

  return (
    <>
      <div className={style.card}>
        <InputTask user={user} />
      </div>

      {tasks.length
        ? tasks.map((task) => 
            <div className={style.card}>
              <Task todo={task} />
            </div>
          )
        : null}
    </>
  );
};

export default Tasks;

Objects are not valid as a React child (found: [object Promise]) while rendering Firebase results

2 Answers2