Passing data to child component is not working in react - reactjs

Question

***Menucomponent.js***
I have a on which onClick handler is working and sending dish detail to getDish function.which is passing data as a props to Cart component.
But it not working .Dishdetail is showing in menu component when i console.log it but won't show on cart component and undefined error.
<div className="row">
{this.props.dishes.map((dish, index) => {
return (
<Card
className="col-xl-2 col-lg-2 col-md-4 col-sm-6 m-3 text-white"
style={{ height: "400px", backgroundColor: "#1A0301" }}
>
<CardBody>
<CardTitle>{this.props.dishes[index].name}</CardTitle>
<CardSubtitle></CardSubtitle>
</CardBody>
<img
height="30%"
src={this.props.dishes[index].image}
alt={this.props.dishes[index].description}
/>
<button className="bg-dark text-white mt-4 " width="100">
<CardText>
Serve for - {this.props.dishes[index].serving}
</CardText>
</button>
<CardBody>
<CardSubtitle>
$$$ -{this.props.dishes[index].price}
</CardSubtitle>
</CardBody>
<button
className="text-white m-2 p-2 "
style={{ backgroundColor: "#FDA50F" }}
onClick={() => this.getDish(this.props.dishes[index])}
>
Order Now
</button>
<button
className="text-white m-2 p-2 "
style={{ backgroundColor: "#FDA50F" }}
>
<Link to="/cart" className="text-white">
Check cart
</Link>
</button>
</Card>
function which handle onclick event
getDishId(dishdetail)
{
return (
<React.Fragment>
<div className="container-fluid">{console.log(dishdetail.name)}</div>
<Cart dishdetail={this.props.dishdetail} />
</React.Fragment>
);
}
CartComponent.js
const Cart = (props) => {
return (
<React.Fragment>
<Card>
<CardImg width="100%" src="/assests/images/buffet.png" />
<CardBody>
<CardTitle>{console.log(props.dishdetail)}</CardTitle>
<CardText>{props.description}</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</React.Fragment>
);
};