Objects are not valid as a React child - Confusing Error

Question

I have a very basic React app setup. I am getting an error I do not understand. This is the error in full:

Objects are not valid as a React child (found: object with keys {posts}). If you meant to render a collection of children, use an array instead.
    in PostList (at App.js:17)
    in div (at App.js:15)
    in App (at index.js:7)
▶ 25 stack frames were collapsed.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import posts from './posts.json'
   6 | 
>  7 | ReactDOM.render(<App posts={posts}/>, document.getElementById('root'));
   8 | 
   9 | 
  10 | 

It appears the React does not like this line and I am unsure why. Here is the app.js file:

  import React from 'react';
  import PostForm from './postform.js'; 
  import PostList from './postlist'; 

  export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
          posts: this.props.posts
      } 
    }

    render() {
      return (
        <div>
          <PostForm />
          <PostList posts={this.state.posts}/>
        </div>
      );
    }
  }

Here is the file that is throwing the error:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import posts from './posts.json'

ReactDOM.render(<App posts={posts}/>, document.getElementById('root'));

Here is the posts.json file that seems to be throwing the error:

[
    {"title": "My First Post", "author": "Jack"},
    {"title": "My Second Post", "author": "Will"},
    {"title": "My Third Post", "author": "Rick"}
]

Here is PostList:

import React from 'react'; 
import Post from './post'; 

export default class PostList extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            posts: this.props.posts
        } 
    }
    render(){
        const posts = this.state.posts.map((post, index) => {
            <Post {...post} key={index} />
        }); 
        return (
            {posts}
        ); 
    }
}

Any help/advice would be appreciated!

Answer 1

Your map function doesnt return anything:

const posts = this.state.posts.map((post, index) => {
            <Post {...post} key={index} />
        });   

Change it to this:

const posts = this.state.posts.map((post, index) => {
            return <Post {...post} key={index} />
        });   

I'm not sure on which react version you are but below V16 a component should return only one root element. so you might need to change it to this:

   render(){
        const posts = this.state.posts.map((post, index) => {
            return <Post {...post} key={index} />
        }); 
        return (
          <div>
            {posts}
          </div>
        ); 
    }

Answer 2

Are you positive your posts object is coming in as a collection? I usually see this error when I have some curly braces wrapping the collection by mistake. React is telling you that it discovered an object with keys {posts}. My guess when you're importing from your posts.json file, it's actually coming into the app as:

{
  posts: [
   {"title": "My First Post", "author": "Jack"},
   {"title": "My Second Post", "author": "Will"},
   {"title": "My Third Post", "author": "Rick"}
 ]
}

Make sure you are passing in the value of posts, which is the collection. I tend to store constants like this in a constants.js file and just export them i.e.:

// constants.js
export const posts = [
    {"title": "My First Post", "author": "Jack"},
    {"title": "My Second Post", "author": "Will"},
    {"title": "My Third Post", "author": "Rick"}
]

Then just import this collection into your App.js file. Hope this helps you out.