Map Child within JSX Component Not Appearing - reactjs

Question

I'm trying to map an array that is the child of JSON objects found in the parent map. I'm still learning JSX and not sure if I can map within a JSX element, but it doesn't appear that my current solution is working because the object isn't rendering and there aren't errors appearing in my console that indicate any issue.
Here is the JSON Object:
[
{
"blogIdHash": "Zb2q97rX5n",
"title": "This is a test",
"discovery": "* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum porta felis, vel varius ligula venenatis eget.\r\n\r\n* Quisque placerat, arcu placerat tincidunt dapibus, justo sapien accumsan lorem, vitae vulputate orci eros sollicitudin nisi. Vivamus dignissim lectus id tincidunt viverra. \r\n\r\n* **Suspendisse ut tempor magna**, et mattis augue. Quisque pretium dui sollicitudin blandit maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, \r\n\r\nper inceptos himenaeos. Quisque mattis lacinia felis eget sagittis. Quisque sed eros scelerisque",
"created_at": "2017-09-01T11:46:31.914Z",
"updated_at": "2017-09-01T12:14:59.375Z",
"blog_comments": [
{
"blogIdHash": "Zb2q97rX5n",
"blogCommentId": 9,
"comment": "Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur porta, eros vitae laoreet pharetra, neque dolor facilisis augue, elementum maximus sapien tortor nec sem. Sed eget est sed felis tincidunt congue. Sed blandit neque vitae tellus interdum, non gravida tortor venenatis.",
"userId": 237,
"created_at": "2017-09-01T11:54:49.089Z",
"updated_at": "2017-09-01T11:54:49.089Z",
},
{
"blogIdHash": "Zb2q97rX5n",
"blogCommentId": 10,
"comment": "Sed laoreet felis ac interdum faucibus. Pellentesque non purus commodo, faucibus magna ac, pharetra urna. Sed sapien eros, efficitur in dui venenatis, euismod mattis nisl. Cras a posuere turpis. Morbi suscipit mollis risus, convallis auctor urna. Nam tristique, ex quis sodales tempor, massa urna maximus odio,",
"userId": 240,
"created_at": "2017-09-01T11:59:12.573Z",
"updated_at": "2017-09-01T11:59:12.573Z",
}
]
}
]
Here is the component setup (JSON blob is being set through a parent component. BlogFeed renders with first mapped object set in BlogCard):
const BlogFeed = props => {
return (
<div>
{
props.blogs.map((blog, index) => {
return (
<BlogCard {...blog} key={blog.blogIdHash}>
return(
{ blog.blog_comments.map((comment, i) => <Comments {...comment} key={i} />)}
)
</BlogCard>
);
})
}
</div>
)
}
const BlogCard = props => {
return (
<div key={props.blogIdHash}>
<h4>{props.title}</h4>
<p>{props.discovery}</p>
</div>
)
}
const Comments = props => {
return (
<div key={props.blogCommentId}>
<h4>{props.comment}</h4>
</div>
)
}

Answer 1

You need to specify in your BlogCard component where to render its children.
Like this:
const BlogCard = props => {
return (
<div>
<h4>{props.title}</h4>
<p>{props.discovery}</p>
{props.children} // its children
</div>
)
}
Also, you don't need the return inside the BlogCard component, map returns an array and that return will be pass in props.children along with the comments and show on your HTML as simple text.
You can check a working example here.
You can find more details about props.children here.