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

This error occurs when a javascript object has been included inside some jsx tags.

It is that simple.

Consider the following example:

// A simple javascript object (also a dictionary) containing three keys
const someObject = {
  name: 'Simple Javascript object',
  id: 123,
  someFunction: function() {
    return <p>This function returned more jsx!</p>;
  }
}

const SimpleFunctionComponent = () => <h2>{someObject}</h2>;

It is important to note that <h2>{someObject}</h2> here is not html, it is jsx. React will parse it and create the corresponding elements in the dom using javascript. The contents between/inside two corresponding component tags (like <h2> and </h2> here) are considered the child or children of the component.

In this example, if I try and render <SimpleFunctionComponent /> I will get the error

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

someObject is not a valid React child. To my knowledge only string, int and more jsx are. someObject is not any of these things.

If I modify SimpleFunctionComponent slightly it will work.

const SimpleFunctionComponent = () => (
  <div>
    <h2>STRING: {someObject.name}</h2>
    <p>INT: {someObject.id}</p>
    <p>JSX: {someObject.someFunction()}</p>
  </div>
);

The only real bit of information here to help debug this sort of problem is the error message will provide you with the keys inside of the object causing the error.

In the OP's code the error is coming from this

<Post 
    key={id} 
    username={post.username} 
    caption={post.caption} 
    imageURL={post.imageURL} 
/>;

Note: The code above is completely valid but the error will come from the rendering of the Post component where any of these attributes are used as a React child.

e.g.

// If Post was a functional component
const Post = (props) => {
   return (
       <div>
           <h1>{props.username}</h1>
           <p>{props.caption}</p>
           <img src={props.imageURL} alt="post image"/>
       </div>
   )
}

Without knowing what the structure of post.id or post.post are all we can deduce is that any one of id, post.username, post.caption, and post.imageURL is actually an object with the key username inside.

(found: object with keys {username}).

Lets assume it is post.username, the OP thought the structure of post was

const post = {
    id: 'some id',
    post: {
        username: 'some username',
        caption: 'some caption',
        imageURL: 'some image url'
    }
}

when it was actually

const post = {
    id: 'some id',
    post: {
        username: {
            username: 'some username'
        },
        caption: 'some caption',
        imageURL: 'some image url'
    }
}

and would need to put username={post.username.username} instead. This would be the same respectively for id, post.caption, and post.imageURL if they were actually the object causing the error.

Here is a CodeSandox of the example I provided and one replicating the situation the OP had.