React:prop eror - reactjs

Question

I am trying to implement Presentational and Container Components using probs, but I get this error "Cannot read property 'image' of undefined" while trying to access an item passed using props.Below is the code I am using in order of Heirachy.The last class(DishDetail.js) has the problem
App.js
import React, { Component } from 'react';
import Main from './components/MainComponent.js';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Main />
</div>
);
}
}
export default App;
MainComponent.js
import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import { DISHES } from '../shared/dishes';
import Menu from './MenuComponent';
import DishDetail from './DishDetail';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES,
selectedDish: null
};
}
onDishSelect(dishId) {
this.setState({ selectedDish: dishId});
}
render() {
return (
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
</div>
</Navbar>
<Menu dishes = {this.state.dishes}
onClick={(dishId) => this.onDishSelect(dishId)} />
<DishDetail
dish = {this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]} />
</div>
);
}
}
export default Main;
MenuComponent.js
import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 'reactstrap';
class Menu extends Component {
constructor(props) {
super(props);
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 col-md-5 m-1">
<Card onClick={(dishId)=>this.props.onClick(dish.id)}>
<CardImg width="100%" src={dish.image} alt={dish.name}/>
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
</div>
);
});
return (
<div className="container">
<div className="row">
{menu}
</div>
</div>
);
}
}
export default Menu;
DishDetail.js
import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 'reactstrap';
class DishDetail extends Component {
constructor(props) {
super(props);
}
renderComments(comments){
const comment_layout= comments.map((comment)=>{
if(comment.comment!=null){
return(
<div>
<h4>Comment</h4>
{comment.comment}
{comment.author}, {new Intl.DateTimeFormat('en-US',{year:'numeric',month:'short',day:'2-digit'}).format(new Date(Date.parse(comment.date)))}
</div>
);
}else{
return(
<div></div>
);
}
});
return(comment_layout);
}
render() {
return (
<div className="row col-sm-12 col-12 m-1 container">
<div className="col-md-5 col-sm-12">
<Card>
<CardImg top src={this.props.dish.image} alt={this.props.dish.name}/>
<CardBody>
<CardTitle>{this.props.dish.name}</CardTitle>
<CardText>{this.props.dish.description}</CardText>
</CardBody>
</Card>
</div>
<div className="col-md-5 col-sm-12 m-1">
{this.renderComments(this.props.dish.comments)}
</div>
</div>
);
}
}
export default DishDetail;