Accessing Props Error in Stateful Child Component - reactjs

Question

I am trying to access the parent object within the stateful child component, but I can't seem to understand why the object is not found. This component was converted from stateless and worked fine, so I'm curious what broke post-conversion. Do I need to set an empty array within the state and then a function to setState with the prop?
Here is the error:
Uncaught ReferenceError: props is not defined
At line this.props.blogs.map((blog, index) => {
Here are the two components:
//GET /api/app and set to state
class BlogFeedContainer extends React.Component{
constructor(props, context) {
super(props, context);
this.state = this.context.data || window.__INITIAL_STATE__ || {blogs: []};
}
fetchList() {
fetch('http://localhost:3000/api/test')
.then(res => {
return res.json();
})
.then(data => {
console.log(data);
this.setState({ blogs: data.blog, user: data.user, csrf: data.csrfToken });
})
.catch(err => {
console.log(err);
});
}
componentDidMount() {
this.fetchList();
}
render() {
return (
<div className="container">
<h2>Comments List</h2>
<BlogFeed {...this.state} />
</div>
)
}
};
//Loop through JSON and create Blog and Comment Container Component
class BlogFeed extends React.Component {
constructor(props){
super(props);
this.state = {
comments: []
};
}
render(){
return (
<div>
{
this.props.blogs.map((blog, index) => {
return (
<div className="row">
<div className="col-md-6 col-md-offset-3 blog-card">
<BlogCard {...blog} key={blog.blogIdHash} user={props.user} />
<Comments {...blog} key={index} blogId={blog.blogIdHash} csrf={props.csrf}/>
</div>
</div>
);
})
}
</div>
);
}
}

Answer 1

You spotted the error in the wrong line.
The this keyword is missing in user and csrf props:
<BlogCard {...blog} key={blog.blogIdHash} user={this.props.user} />
<Comments {...blog} key={index} blogId={blog.blogIdHash} csrf={this.props.csrf} />