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

Question

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {_delegate}). If you meant to render a collection of children, use an array instead.

This is the object

const post = [
{
  id: 1,
name: "Farish Jamal",
description: "Web Developer",
time: new Date().toLocaleTimeString(),
message: "This is forat",
photoUrl: "",
timestamp: firebase.firestore.FieldValue.serverTimestamp()
},
{
  id: 6,
name: "Farish Jamal",
description: "Web Developer",
time: new Date().toLocaleTimeString(),
message: "This is forat",
photoUrl: "",
timestamp: firebase.firestore.FieldValue.serverTimestamp()
},]

This is where i am fetching the data

<div className='feed__post'>
    {post.map(({id, name, description, message, photoUrl, timestamp }) =>(
        <Post 
        key={id}
        name={name}
        description={description}
        message={message}
        photoUrl={photoUrl}
        time={timestamp}
        />
    ))}
    </div>

limco · Answer 1 · 2022-09-21T09:52:29.097

Your timestamp value firebase.firestore.FieldValue.serverTimestamp() is returning (what is being considered) an object and the time prop is not being processed properly by your <Post> component.

Does the error go away when you remove this time={timestamp}

<div className='feed__post'>
    {post.map(({id, name, description, message, photoUrl, timestamp }) =>(
        <Post 
        key={id}
        name={name}
        description={description}
        message={message}
        photoUrl={photoUrl}
        />
    ))}
    </div>

I'm not 100% on exactly the best way to process the object returned from serverTimestamp() but I'm referring to this post suggesting:

firebase.firestore.FieldValue.serverTimestamp().toDate() which will give you a JS Date object, which you should be able to process into a string with .toLocaleTimeString()

How to get a JavaScript Date object from the new `firebase.firestore.FieldValue.serverTimestamp()`

firebase.firestore.FieldValue.serverTimestamp().toDate().toLocaleTimeString()

score 0 · Answer 2 · answered Sep 21 '22 at 09:34

all elements is inside in one object and you need to check the length first...

<div className='feed__post'>
    {(post.length > 0) && post.map(item =>(
        <Post 
          key={item.id}
          name={item.name}
          description={item.description}
          message={item.message}
          photoUrl={item.photoUrl}
          time={item.timestamp}/>
    ))}
</div>

score -1 · Answer 3 · answered Sep 21 '22 at 09:18

-1

you should pass any of objects in your object array in map function:

<div className='feed__post'>
    {post.map(item =>(
        <Post 
        key={item.id}
        name={item.name}
        description={item.description}
        message={item.message}
        photoUrl={item.photoUrl}
        time={item.timestamp}/>
    ))}
</div>

answered Sep 21 '22 at 09:18

Feriem

9
2

No it is still not working – farishjamal Sep 21 '22 at 09:27
you should check time and timestamp property of Post object – Feriem Sep 21 '22 at 09:42

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

3 Answers3