Error: Objects are not valid as a React child (found: object with keys {id, value}). If you meant to render a collection of children, use an array

Question

The question is generic but I'm using firestore and it's a NoSQL and no answer was able to fix this error. So I have a useState:

    const [users, setUsers] = useState([]);

Then I am fetching the snapshot of documents in a collection and store it in an array:

    useEffect(() => {
        db.collection("Users").get().then((querySnapShot) => {
            let arr = []
            querySnapShot.docs.map((doc) => {
                arr.push({ id: doc.id, value: doc.data() })
            })
            setUsers(arr);
        });
    }, [db])

Then later in the code, I am using that array as:

            <p>Here is the list of all the users that are in the database: </p>
            {(users != null) && users.map((user, index) => (
                <ul key={index}>{user}</ul>
            ))}

I'm not sure what I am doing wrong but I'm getting

Error: Objects are not valid as a React child (found: object with keys {id, value}). If you meant to render a collection of children, use an array instead.

You have to enumerate the properties of `user`. If you replace `{user}` with some random text (to demonstrate the point) the error will go away. — Randy Casburn, Oct 30 '21 at 20:35

score 1 · Accepted Answer · answered Oct 30 '21 at 20:48

1

a user is an object or array, not a string for example, and putting that makes an error. use {user.name} or property of user instead of whole object/array.

answered Oct 30 '21 at 20:48

Ebay

355
2
12

Error: Objects are not valid as a React child (found: object with keys {id, value}). If you meant to render a collection of children, use an array

1 Answers1