score:1
post = this.state.posts.map(function (item, key) {
return <Post title={item.title} content={item.content} key={key}/>
})
Your state.posts is an array and you should map over it.
score:1
post = Object.keys(this.state.posts).map((item, key) => {
return (
<Post
title={this.state.posts[item].title}
content={this.state.posts[item].content}
/>
)
})
as Subin says, what you need to do in that case is just map over the posts array.
But, to fix your code is very simple. just use arrow function instead of a regular function.
score:1
Do it like this:
post = this.state.posts.map(post => {
return <Post title={post.title} content={post.content} key={post.title}/>
})
When you map over array, you dont need to acces that state again, because post will be assigned to post inside map function. And then just acces title
and content
. and dont forget to pass key
,there i've passed key={post.title}
but that is not a good solution, because it needs to be unique.
Source: stackoverflow.com
Related Query
- React - Iterating over State to dynamically generic element
- Change state as long as mouse is over an element in React
- Dynamically iterating over an array of json objects in React
- Dynamically styling element in react component using state
- React – the right way to pass form element state to sibling/parent elements?
- Cannot create an element in react component dynamically
- Iterating over JSON in React
- React Apollo: Dynamically update GraphQL query from Component state
- React + Redux: Scrolling a DOM element after state change
- Change state dynamically based on the external Internet connectivity - React (offline/online)
- How to trigger a state change when hovering over an element
- React Apollo dynamically create query from state
- Is there a generic way to set state in React Hooks? How to manage multiple states?
- Add element to a state React
- React set state property dynamically
- axios cannot resolve state element react
- Create React element dynamically
- How to dynamically create objects in state with react hooks?
- React / Rails : Append dynamically element to DOM
- Remove element of an object from array of objects - react state
- How to render multiple buttons by iterating over an array in React
- React element change state from dom
- React Click Counter: Updating State of just one element
- Dynamically render react component based on parent state
- How to dynamically get state array name React
- How to add a each element of an array into React state
- How to re-render react component when mapping over state that is array of objects
- Creating React Element Dynamically in Typescript
- How to change an array element in state in a React
- Why is initial state being set over and over again in the "useState" hook of react
More Query from same tag
- react-scroll does not work in Electron app
- Material UI dropdown/autocomplete
- Uncaught Error: Browser Detection in ReactJS
- The "react-standalone-form" is not working
- Serve a different SCSS file based on the text direction property
- Passing an object from Redux from React causes unnecessary renders?
- react-scripts start error (Cannot find module '../scripts/start') - how can i fix this?
- Error in express route for submitting the mail to user using nodemailer and reactjs
- Text is not transitioning in with parent element, it just pops up immediately
- How to test react-router with enzyme
- react-testing-library testing Ant Design modal
- My button needs to be clicked twice to render the new component for the first click React
- Replace dot with comma Input while typing decimal points
- Radio button does not update UI in NavItem
- Why React renders a component even though I don't pass anything to it?
- Problem with implementing the CSS breakpoint mixin using TypeScript
- Visual Studio Code doesn't recognize absolute import in Typescript
- React createElement does not add children of type string when mutiple children are part of inner html
- Webpack-dev-server Cannot find module 'webpack-cli/bin/config-yargs'
- Typescript how to make a fucntion optional when its passed via props
- React events handling, best practice
- Unable to delete the first value in input
- [0,1,2,3].map works fine, array.map gives strange results
- Is it possible to get a list of all items in an array of objects that match items in another array?
- How to update style element in Ant Design React component using Javascript
- How to drag an element and ensure that the cursor won't faster than it?
- Jest + react-testing-library: Warning update was not wrapped in act()
- Styled components select previous sibling
- React Hooks: memoize click handlers for list?
- Lining up Material-UI Text Field with Paragraph