score:0

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.

score: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>
        ); 
    }

Related Query

More Query from same tag