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>
);
}
Source: stackoverflow.com
Related Query
- Objects are not valid as a React child - Confusing Error
- Objects are not valid as a React child getting error when adding div?
- Handling error in React with Formik: Objects are not valid as a React child
- Error Objects are not valid as a React child (found: Invalid date)
- React error saying Objects are not valid as react child
- Objects are not valid as a React child error when giving value to react-select
- React setState error -> Objects are not valid as a React child
- React Objects are not valid as a React child error
- Objects are not valid as a React child Error in next js
- Error in map function / Objects are not valid as a React child / React.js
- react map returned error of Objects are not valid as a React child
- Objects are not valid as a React child error in React Datatable
- Getting Error Like Objects are not valid as a React child In ReactJs
- React Axios fetch response with error Objects are not valid as a React child
- I AM HAVING ERROR WHEN TRYING TO MAP A DATA IN REACT . Objects are not valid as a React child (found: object with keys {children}), How do i solve it?
- What is causing this error - Objects are not valid as a React child (found: object with keys {id, task})
- Getting error Objects are not valid as a React child
- Objects are not valid as a React child with state while rendering error
- REact error Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead
- Getting a Objects are not valid as a React child error even though I am not trying to render an object
- Trying to add an array of objects using react useState but getting the error 'Objects are not valid as a React child (found: object with keys {})'
- Handling error Objects are not valid as a React child
- Passing an array of object to useState throws this error Objects are not valid as a React child (found: object with keys {id, name})
- getting error about objects are not valid as a React child
- Objects are not valid as a React child error in Datatable
- Objects are not valid as a React child -> Build time error -> next js typescript
- Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. error
- React Typescript - Error Objects are not valid as a React child
- Objects are not valid as a React child - Cannot resolve error
- Can't render Objects inside JSX. Throwing error Objects are not valid as a React child (found: [object Promise])
More Query from same tag
- How can I measure wasted renders in React 16?
- Why is .card-header not rendering properly in my React Bootstrap setup?
- useHistory react-router-dom invalid hook call
- Babel 7.5 targeting babel-preset-es2015 instead of @babel/preset-env
- React testing library - how to send "anchorEl" as prop?
- React: Give back the child new inserted element to parent for update the state
- Algolia-specific => How to access hit attributes within react jsx
- React: How can we know that all component has been mounted/rendered after setState()?
- om ClojureScript ref-cursor error when trying to update vector using om/transact
- How to remove port from url for node application using nginx
- React - onClick(item) of item in list using for loop
- Rendering text with Header tag
- ReactJS: fetch give error cannot read properties
- Execute code on parent component based on parent component's state changed in child component
- How do you pass a parameter to defineMessages in react-intl?
- display icon in a column in react-table on mouseover/enter
- UseEffect - else with curly brackets causing error
- Array items sorting in javascript
- Why does useMediaQuery always return false in React.js
- why I can not use setState value in my code?
- ReactJS, changing img src stored in state array
- Filter data without <Fragment> before ReactJS Firebase
- I received products data from fakestoreapi to the console but not receiving to the browser
- Get class instance of ReactElement
- Resolve screen jump when the scrollbar appears
- Invariant failed: You should not use <Switch> outside a <Router> using Static Router
- What is lazy in React?
- If event is Enter Button or mouse click, do something
- Rendering multiple components with condition
- sort an array with react hooks