React erroring because of different, mystery object - json

Question

I'm trying to render some JSON and the error I get references some fields that don't exist in my JSON structure. The fields are getting logged to the console properly.
Which object is this referring to, and how do I fix it?
Error: Objects are not valid as a React child (found: object with keys {_events, _eventsCount, _maxListeners, uri, callback, readable, writable, _qs, _auth, _oauth, _multipart, _redirect, _tunnel, headers, setHeader, hasHeader, getHeader, removeHeader, method, localAddress, pool, dests, __isRequestRequest, _callback, proxy, tunnel, setHost, originalCookieHeader, _disableCookies, _jar, port, host, path, httpModule, agentClass, agent}). If you meant to render a collection of children, use an array instead.
Postlist:
class PostList extends React.Component {
render() {
return (
request('http://194.5.192.153:3044/api/posts/', function (error,response,body) {
let items = JSON.parse(body).items;
for(let i=0; i<items.length; i++) {
console.log(items[i].author,items[i].desc,items[i].updatedAt,items[i].title);
return (
<Post author={items[i].author} desc={items[i].desc} image={items[i].image} title={items[i].title} createdAt={items[i].createdAt} updatedAt={items[i].updatedAt} />
);
}
})
)
}
}
Post:
const Post = (props) => {
return (
<>
<img src={props.image} alt="" />
<h1>{props.title}</h1>
<h2>by {props.author}</h2>
<div>Created at {props.createdAt}</div>
<div>Updated at {props.updatedAt}</div>
<div>{props.desc}</div>
</>
);
}
export default Post;

Answer 1

In your code, you are effectively trying to render the return value from request, which is certainly not what you want. Since request is asynchronous, the general pattern here is to set state in the callback and then map over that state in the render method.
class PostList extends React.Component {
state = { items: [] };
componentDidMount() {
request(
"http://194.5.192.153:3044/api/posts/",
(error, response, body) => {
const items = JSON.parse(body).items;
this.setState({ items });
}
);
}
render() {
return this.state.items.map((item) => (
<Post
key={item.title}
author={item.author}
desc={item.desc}
image={item.image}
title={item.title}
createdAt={item.createdAt}
updatedAt={item.updatedAt}
/>
));
}
}