Getting error: "Objects are not valid as a React child" on array rendering

Question

I'm trying to do a simple task. Rendering contents of an array:

const [comments, setComments] = useState([]);   // an array to begin with


handleFetch = () => {
   ...
   ...
   const obj = resp.data.comments;
   const new_array = new Array();
   new_array.push(obj);
   setComments(new_array);
   ...
}


return (

    {comments.forEach(comm => <p>{comm.post}</p>)}
);

comments (resp.data.comments) come in as an array of objects:

comments = [{'post': 'something', 'timestamp': 'some time'}]

Error output I'm getting:

Error: Objects are not valid as a React child (found: object with keys {post, timestamp}). If you meant to render a collection of children, use an array instead. (But I'm using an array. An array of objects)

these two steps: const new_array = new Array(); new_array.push(obj); are not necessary.. it will create a nested array — Shivam Jha
– Shivam Jha, Commented Apr 25, 2021 at 6:44
I've tried to go without it but got same error. This is what I did before: setComments(obj); — Mark
– Mark, Commented Apr 25, 2021 at 6:45
Replace forEach with map. ForEach does not return anything whereas map will return you an array with items that needs ti be rendered — kapil pandey
– kapil pandey, Commented Apr 25, 2021 at 6:47
.forEach() returns undefined. Also, you've wrapped your .forEach() in {} but without <> </>, causing it to be treated as an object initializer. So I suspect your return is returning { undefined: undefined }, thus the reason for the error message. — Ouroborus
– Ouroborus, Commented Apr 25, 2021 at 6:47
obj = resp.data.comments; makes no sense. I would guess data.comments is an array by itself and not a single comment Object. log it and check. — vsync
– vsync, Commented Apr 25, 2021 at 6:53

Ayaz · Accepted Answer · 2021-04-25 07:08:05Z

3

Since resp.data.comments is an array, you can directly set to it to state comments using setComments(resp.data.comments) and use Array.prototype.map function in jsx to render.

const [comments, setComments] = useState([]);   // an array to begin with


handleFetch = () => {
   ...
   ...
   setComments(resp.data.comments);
   ...
}


return (
<>
    {comments.map(comm => <p>{comm.post}</p>)}
</>
);

edited Apr 25, 2021 at 7:08

answered Apr 25, 2021 at 7:01

Ayaz

2,1314 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayaz Over a year ago

Mark has mentioned in his question. comments (resp.data.comments) come in as an array of objects: the data as comments = [{'post': 'something', 'timestamp': 'some time'}]

vsync Over a year ago

Right. I'm voting up.

Ouroborus · Accepted Answer · 2021-04-25 06:51:06Z

1

You need to use .map() to return the value. So you can fix like this:

return (
  <>
    {comments.map((comm, index) => <p key={index}>{comm.post}</p>)}
  </>
);

edited Apr 25, 2021 at 6:51

Ouroborus

17k8 gold badges42 silver badges65 bronze badges

answered Apr 25, 2021 at 6:45

Viet

12.9k2 gold badges18 silver badges23 bronze badges

6 Comments

vsync Over a year ago

Why the need for key prop is true, this has nothing to do with the problem, and therefore is not a valid answer. Should have been a comment

vsync Over a year ago

I've read it multiple times, and still, your "answer" has nothing to do with the problem. Trust me, I've been doing React for years.

Viet Over a year ago

The problem is using forEach on return. You make sure using forEach like this work well?

vsync Over a year ago

This is indeed a part of the problem, but not the root cause. See the other answer for the actual problem. The iterated data is not an Array of Objects but an Array of a single Array of Objects

Viet Over a year ago

I saw. But why you told my answer nothing to do?

|

Collectives™ on Stack Overflow

Getting error: "Objects are not valid as a React child" on array rendering

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related