I am building a simple blog app in react in which, I have nested json data, so every json data have a unique nested json data, I will show with every blog.
json data
const blogs = [
{
id : 1,
title: 'First Blog',
comments : [
{
commentId : 1,
body : 'First Comment',
},
{
commentId : 3,
body : 'First Comment',
},
]
},
{
id : 2,
title: 'Second Blog',
comments : [
{
commentId : 7,
body : 'First Comment',
},
{
commentId : 9,
body : 'First Comment',
},
]
}
]
app.js
class App extends React.Component {
render() {
const blogs = this.state.blogs.map((blog) => (
blog.comments.map((comment) => (
<BlogDetail
id={blog.id}
key={blog.id}
title={blog.title}
commentId={comment.id}
/>
)
)
return (
<div>
{blogs}
</div>
)
}
}
class BlogDetail extends React.Component {
render() {
return (
<div>
{this.props.id}
{this.props.title}
</div>
)
}
}
When I render BlogDetail component then it is showing one blog multiple times (depends on how many comments are on it).
I have tried many times but it is still showing this.
Any help would be much Appreciated. Thank You in Advance.
According to your code, BlockDetail does show every comment in every post. In BlockDetail you render each comment in comments with the title, but in your json there is no such property as 'title', only the 'body'. What are you trying to achieve?
const BlogDetail = (props) => {
return (
<div>
{props.commentId}
{' '}
{props.commentBody}
</div>
)
}
function App() {
// Blogs is the json you are using
const blogs = Blogs.map((blog) => (
<div>
{blog.title}
{blog.comments.map((comment) => (
<BlogDetail
key={blog.id}
commentId={comment.commentId}
commentBody={comment.body}
/>
)
)}
<br />
</div>
))
return (
<div>
{blogs}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Using this you will get an outcome like this
First Blog
1 First Comment
3 First Comment
Second Blog
7 First Comment
9 First Comment